Menneisyys
05-31-2006, 07:41 PM
Over at the AximSite forums, AximSite user Vinman has mentioned (http://www.aximsite.com/boards/showpost.php?p=1100997&postcount=17) having problems with a company website with the trial version of great Web browser NetFront 3.3, while Opera Mobile, the new browser star on the Pocket PC horizon, has no problems with the same page.
I’ve, consequently, thoroughly scrutinized the page source and found out the following: both the latest (1.06D2; that is, the trial) version of NetFront 3.3 and the built-in Pocket Internet Explorer / Internet Explorer Mobile (yes, this problem also affects the built-in IEM browser in WM5, the latest incarnation of the Windows Mobile operating system) are unable to use the JavaScript code document.forms[<form index>].<some element ID>.disabled = true|false to disable form fields.
(Incidentally, if you have problems with a specific Web page and your Pocket PC Web browser(s), don’t be afraid of contacting me. Telling me about bugs is highly advantageous for the entire Pocket PC community because, this way, we can force (and help) Web browser developers to identify and fix the problems. So far, I’ve been able to find all the browser bugs Pocket PC users have reported to me.)
A HTML/JS code snippet demonstrating this can be seen at the bottom of this article. Note that it’s also available online here (http://www.winmobiletech.com/sekalaiset/FormElementDisableBugDemo.html) – feel free to click the link and note that it does render a second dialog box if clicked from a capable Web browser – for example, the desktop IE6. In Opera Mobile 8.6, it’s working just great (http://www.winmobiletech.com/052006FormDisableBug/OperaMob86FormDisabled.bmp.png). NetFront 3.3, on the other hand, will only display the first JS dialog (http://www.winmobiletech.com/052006FormDisableBug/NF33FormDisabled.bmp.png) (please note that, in order to see this dialog, you do NOT need to enable pop-up windows with the (Menu/)Tools/Browser Setting/Dialog/Pop-up drop-down list!). The case is the same with PIE/IEM – it will only display the first dialog box as can be seen in here (http://www.winmobiletech.com/052006FormDisableBug/IEMWM5FormDisabled.bmp.png).
Unfortunately, the same stands for the alternative way (http://www.quirksmode.org/dom/usableforms.html) of dynamically hiding HTML form fields described and demoed here (http://www.quirksmode.org/dom/usableforms.html) (the embedded, dynamic HTML form is really worth checking out with both a desktop browser and the Pocket PC ones) – it’s only Opera Mobile that is able to dynamically hide/show form elements based on user input (see screenshot (http://www.winmobiletech.com/052006FormDisableBug/Opera86Alternate.bmp.png)), PIE/IEM (see screenshot (http://www.winmobiletech.com/052006FormDisableBug/IEMWM5Alternate.bmp.png)) and NetFront (see screenshot (http://www.winmobiletech.com/052006FormDisableBug/NF33Alternate.bmp.png)) don’t.
How can you, as an HTML author, avoid situations like this?
As, however much Opera Mobile is by far the best and most standards compliant Web browser for the Pocket PC, it’s highly unlikely all your visitors using Pocket PC's will be using or having access to it. Therefore,
* always avoid using document.forms[<form index>].<some element ID>.disabled = true|false
* you can use the above-introduced dynamic HTML forms (http://www.quirksmode.org/dom/usableforms.html), but, as has been pointed out, they will be statically rendered by non-Opera Pocket PC web browsers, which is not necessarily what you want.
(Note that I haven’t tested Thunderhawk and Minimo in this respect. The former lacks support for VGA and any advanced features - for example, multiple tabs (a showstopper for many users) and the latter is still far from being really usable. This makes them much less appealing alternatives to Pocket Internet Explorer than either NetFront or Opera Mobile.)
Additional information
Disabling form fields by quirksmode.org (http://www.quirksmode.org/js/disabled.html) - a nice tutorial on disabling form fields
Code snippet demonstrating the JavaScript problem
<script language="JavaScript" type="text/javascript">
<!--
function myfunc()
{
alert("1");
document.forms[0].someid.disabled = false;
alert("2");
}
//-->
</script>
<body onLoad="myfunc()">
<form name="myform" method="post">
<img src="2006_BoardOfExperts.gif" id="someid" name="someid">
</form>
</body>
I’ve, consequently, thoroughly scrutinized the page source and found out the following: both the latest (1.06D2; that is, the trial) version of NetFront 3.3 and the built-in Pocket Internet Explorer / Internet Explorer Mobile (yes, this problem also affects the built-in IEM browser in WM5, the latest incarnation of the Windows Mobile operating system) are unable to use the JavaScript code document.forms[<form index>].<some element ID>.disabled = true|false to disable form fields.
(Incidentally, if you have problems with a specific Web page and your Pocket PC Web browser(s), don’t be afraid of contacting me. Telling me about bugs is highly advantageous for the entire Pocket PC community because, this way, we can force (and help) Web browser developers to identify and fix the problems. So far, I’ve been able to find all the browser bugs Pocket PC users have reported to me.)
A HTML/JS code snippet demonstrating this can be seen at the bottom of this article. Note that it’s also available online here (http://www.winmobiletech.com/sekalaiset/FormElementDisableBugDemo.html) – feel free to click the link and note that it does render a second dialog box if clicked from a capable Web browser – for example, the desktop IE6. In Opera Mobile 8.6, it’s working just great (http://www.winmobiletech.com/052006FormDisableBug/OperaMob86FormDisabled.bmp.png). NetFront 3.3, on the other hand, will only display the first JS dialog (http://www.winmobiletech.com/052006FormDisableBug/NF33FormDisabled.bmp.png) (please note that, in order to see this dialog, you do NOT need to enable pop-up windows with the (Menu/)Tools/Browser Setting/Dialog/Pop-up drop-down list!). The case is the same with PIE/IEM – it will only display the first dialog box as can be seen in here (http://www.winmobiletech.com/052006FormDisableBug/IEMWM5FormDisabled.bmp.png).
Unfortunately, the same stands for the alternative way (http://www.quirksmode.org/dom/usableforms.html) of dynamically hiding HTML form fields described and demoed here (http://www.quirksmode.org/dom/usableforms.html) (the embedded, dynamic HTML form is really worth checking out with both a desktop browser and the Pocket PC ones) – it’s only Opera Mobile that is able to dynamically hide/show form elements based on user input (see screenshot (http://www.winmobiletech.com/052006FormDisableBug/Opera86Alternate.bmp.png)), PIE/IEM (see screenshot (http://www.winmobiletech.com/052006FormDisableBug/IEMWM5Alternate.bmp.png)) and NetFront (see screenshot (http://www.winmobiletech.com/052006FormDisableBug/NF33Alternate.bmp.png)) don’t.
How can you, as an HTML author, avoid situations like this?
As, however much Opera Mobile is by far the best and most standards compliant Web browser for the Pocket PC, it’s highly unlikely all your visitors using Pocket PC's will be using or having access to it. Therefore,
* always avoid using document.forms[<form index>].<some element ID>.disabled = true|false
* you can use the above-introduced dynamic HTML forms (http://www.quirksmode.org/dom/usableforms.html), but, as has been pointed out, they will be statically rendered by non-Opera Pocket PC web browsers, which is not necessarily what you want.
(Note that I haven’t tested Thunderhawk and Minimo in this respect. The former lacks support for VGA and any advanced features - for example, multiple tabs (a showstopper for many users) and the latter is still far from being really usable. This makes them much less appealing alternatives to Pocket Internet Explorer than either NetFront or Opera Mobile.)
Additional information
Disabling form fields by quirksmode.org (http://www.quirksmode.org/js/disabled.html) - a nice tutorial on disabling form fields
Code snippet demonstrating the JavaScript problem
<script language="JavaScript" type="text/javascript">
<!--
function myfunc()
{
alert("1");
document.forms[0].someid.disabled = false;
alert("2");
}
//-->
</script>
<body onLoad="myfunc()">
<form name="myform" method="post">
<img src="2006_BoardOfExperts.gif" id="someid" name="someid">
</form>
</body>