Mobile Phone Keypad script

Inspired by these:
http://www.codingforums.com/showthread.php?t=34291
http://www.codingforums.com/showthread.php?t=36939

Any comments or suggestions are welcome. :)

I've got one problem...
Wrapping in textarea (which I used as LCD) is ugly in Netscape6+/Mozilla. CSS white-space property is not supported yet (http://www.hixie.ch/tests/evil/mixed/wraptextarea.html). If you type a word that is longer than the width can display, horizontal scrollbar appears.
The non-standard WRAP attribute is not supported either. This is not a problem for IE as WRAP="SOFT" is the default behavior.
Anyone knows a fix for that? I've seen some suggestion (http://www.askbjoernhansen.com/archives/2002/03/17/000003.html) but it doesn't work.

Fixed one small error although it did not have a side effect.

str = (lcd.value.length==0) ? lcd.value = ch : lcd.value.substring(0, lcd.value.length-1) + ch;

to:

str = (lcd.value.length==0) ? ch : lcd.value.substring(0, lcd.value.length-1) + ch;

Hi Glenn,

You can get Mozilla to *automatically* put a soft wrap on text by specifiying a value for COLS... The effective width can still be re-styled via CSS (as you are presently doing), as long as the COLS attribute is declared inside the textarea tag.

No need to specify wrap=soft, though I haven't yet tested with wrap=hard ...

Didn't work for me in NS7.02 and Moz1.0
Which version have you tested it with?

success with Netscape 6.1 ...

I've got Netscape 7.02 onboard, as well as MOZ 0.9.9 and Firebird 0.7pre ... I'll run a quick check in those later today and will post again later tonight...

just to be clear: we're talking about a soft wrap here, not a hard one, right?

That being the case, I just ran your page through Firebird 0.7pre, and that browser's all right as is...

Netscape 6.1 wants cols="14" (or any other value) before a soft wrap is given... Though your floated spans end up overlapping the textarea after you write to them via innerHTML (because #status div's height momentarily becomes 0 as the content is emptied and textarea moves up in offset-height). This can be fixed by setting div#status { height:1.5em } (or whatever)...

MOZ 0.9.9 wants COLS explicitly declared as above, but doesn't suffer from textarea "jumpiness".

***

Tried adding wrap="hard" to textarea but none of the above browsers deliver it.

Compared performance in a couple of my own pages with textareas, and identical results re:cols + wrap for all browsers here discussed.

***

report on NS 7.02 later (sorry, in a rush... I'm off to work now...)

***

btw, in case OS is a factor here, I'm running Win98 SE.

Hi Glenn,

I just tested via Netscape 7.02: requirements and performance same as with NS6.1 discussed above.

Tested also with K-Meleon 0.7 (build 700): as with Firebird, KM already gives softwrap without requiring changes... Also doesn't grab wrap="hard" though...

***

Any luck with the wraps at your end?

Can you post your demo page so that I can test it myself?
Thanks! I appreciate you on taking time on this. :thumbsup:
I'll put your name on the final script.

Let me re-iterate my original observation.

If you type a word that is longer than the width can display, horizontal scrollbar appears.

Your suggestion works (and also even the link I posted) if you are typing short words (of course separated with spaces). But if you type a single word (of course without a space) that consists of 11-13 characters or longer than the width of the textarea can display, scrollbars appears in NS/Moz as opposed to IE's behavior of putting a soft wrap.

"Let me re-iterate my original observation."

Well yes, but your original observation also refers to WRAP="SOFT", which is why I asked you to confirm that we were actually discussing a soft wrap, rather than a hard one.

Yes IE wraps single words when they are longer than the width of the textarea, but this constitutes a hard wrap. Glenn I may be misreading you, but you seem to refer to this as a soft wrap.

soft wrap = browser wraps text only if white-space is encountered, but does not force a wrap when no white-space is present.

hard wrap = browser forces wrap even when no white-space is present, otherwise wraps text at white-space.

***

Though none of the mozilla engine browsers seem to deliver a hard wrap, having a soft wrap is still an improvement over no wrap at all, which is what NS6 et al were giving you originally.

Soft and hard wraps look the same, they both wrap if the length is greater than the display area regardless of the whitespace. The only difference is that in soft wrap, the text is submitted to the server without carriage returns and linefeeds, while in hard wrap, text is submitted with soft returns and linefeeds (as the user sees the text in the textarea)

http://www.htmlcodetutorial.com/forms/_TEXTAREA_WRAP.html
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wrap.asp

As you see on the msdn reference, the default wrap for IE textarea is soft. And if you type a long word in a textarea with no wrap attribute defined, the text will wrap.

Are we on the same line?

A few suggestions:

- implementing "Abc" text mode, which types a capital and then switches to lower case
- using <button> so that you can have the letters on the buttons as well
- not using a textarea, then you won't have these wrapping problems (which afaik are unsolveable exactly as you've described)

And how about predictive typing ;)

- implementing "Abc" text mode, which types a capital and then switches to lower case

It already has that feature. It's not obvious though. It's the [#^] key in the lower right.

- using <button> so that you can have the letters on the buttons as well

As I said in the intro of the script, I didn't concentrate on the design layout of the buttons but on their functionality. It's up to those who would implement this script to use <button> or image for the keypad.

- not using a textarea, then you won't have these wrapping problems (which afaik are unsolveable exactly as you've described)

Maybe in the next version. :)

And how about predictive typing ;)
Haven't thought of implementing it, it's too complicated.

Are we on the same line?

Well, apart from my embarassing mis-categorization of hard/soft wrapping, I guess we are. :)

Thanks for the correction Glenn.

Now, for all that, I hope that some advance was still made, in that Netscape 6 and (some of) the other Mozilla browsers discussed above were not giving any wrap whatsoever prior to specifying a COLS value.


***

I'd also recommend using ems to specify the container width (whether it's a textarea or no), as this way the element will expand to accomodate the same number of characters should the viewer increase their font-size - but, as you say, that's a design-layout issue.

Can you disable horizontal scrolling? :)

sorry posted in wrong place