Good afternoon programmers, I am designing an application in which students are to enter a number in an <input> box. I have written a function that filters out all characters except the digits (0-9), Delete, Backspace and Enter. In addition if the minus key, "-", is pressed, it is replaced with this character "ˉ" to indicate negation; a negative 5 appears as ˉ5. The function always places the negation sign as the first character regardless of when it was entered. The minus key toggles the negation. To begin the <input> box has a “?†which is selected; see the attached screen shot SELentry.jpg. When the browser is Firefox, everything works as designed. The entry can be "-" followed by 5, or 5 followed by "-", the <input> box always displays ˉ5. Pressing the "-" key toggles the negation. This is how Firefox looks; attached screen shot FFentry.jpg. My problem is, ARRGH, IE! IE has two problems. First, the <input>box is rendered using a different character for negation; however the correct character is used in other parts of the problem statement. Second, as shown below the 5 precedes the "ˉ". This occurs if the student enters "-" followed by 5. If 5 is entered and then "-", the <input> box is rendered as "ˉ5". My problem child is the attached screen shot IEentry.jpg. The following code includes the HTML and the JavaScript function <div id="equation"> <span id="Eq1" class="txt"></span> <input id="Ans" type="text" class="txt" onfocus="this.select()" onkeydown="return keyPressed(event)" value="" /> <span id="Eq2" class="txt"></span> </div> function keyPressed(e) { //Allow the entry of digits 0 to 9, Backspace, Delete & Enter. //Use the "-" character for negation var validKC=[48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105,8,46,13] var myAns=getInput("Ans"); myAns=(myAns.indexOf("?")>=0)?"":myAns; var KC=(window.event) ? event.keyCode : e.keyCode; if (KC==189 || KC==109) // check for negation { // "-" was entered; toggle "ˉ" symbol myAns=(myAns[0]==symNeg) ? myAns.substring(1) : symNeg+myAns; } setInput("Ans",myAns); if(KC==13)alert("Answered!"); return (IndexOf(KC,validKC)>=0); } Code (markup): Any insight into what I have done wrong and how to resolve these two issues will be greatly appreciated. P.S. Don’t get on my case for answering these two problems incorrectly; the entries were just illustrative.
Hi, the problem is that IE dos not support the [] operator for strings, use the cross-browser charAt method instead (myAns[0] --> myAns.charAt (0)). Some remarks: - in inline event handlers, the this keyword refers to the element on which the event handler was registered, so the input object can be passed to the keyPressed method as a second parameter and the getInput and setInput methods become unnenecessary. - storing the valid key codes in an array is not a bad solution, but in your case a little bit faster if you use an if condition. - if you want to set an initial value ('?') for the input box, use the onfocus and onblur events instead of the onkeydown event. When the input gets the focus, the initial value disappears, when the input loses the focus and its value is empty, the initial value reappears. I think it is a better solution. <head> <script> //Allow the entry of digits 0 to 9, Backspace, Delete & Enter. function isKCValid (kc) { return ((kc >= 48 && kc <= 57) || (kc >= 96 && kc <= 105) || kc == 8 || kc == 46 || kc == 13); } function clearDefaultValue (input) { if (input.value == input.defaultValue) { input.value = ""; } input.select (); } function setDefaultValue (input) { if (input.value == "") { input.value = input.defaultValue; } } function keyPressed (event, input) { var symNeg = "\xAF"; //Use the "-" character for negation var myAns = input.value; var KC = event.keyCode; if (KC==189 || KC==109) // check for negation { // "-" was entered; toggle "ˉ" symbol myAns = (myAns.charAt(0)==symNeg) ? myAns.substring(1) : symNeg+myAns; } input.value = myAns; if (KC == 13) { alert("Answered!"); } return isKCValid (KC); } </script> </head> <body> <div id="equation"> <span id="Eq1" class="txt"></span> <input id="Ans" type="text" class="txt" onfocus="clearDefaultValue (this)" onblur="setDefaultValue (this)" onkeydown="return keyPressed(event, this)" value="?" /> <span id="Eq2" class="txt"></span> </div> </body> Code (markup): I suggest the following sites, they contain detailed descriptions and several examples related to that topic: this keyword, onfocus event, onblur event, onkeydown event, value property (input:text), defaultValue property, charAt method (String).
Gumape, Thanks for your reply it has been a great help. I'm relatively new to JavaScript and your example and the links you provided haves taught me quite a bit. In my new version both IE & Firefox operate identically except for how IE renders the symNeg. The symNeg = "\u02c9". It renders as "\xaf" in the input box, whereas in other text situations it renders correctly. In my application I want the input box to show a selected "?" to the student. In IE, I confused the insertion point when the symNeg is entered. I solved the problem by using JavaScript to pragmatically enter the characters in the correct position. To solve the insertion point confusion in IE, I selected the input box (input.select(), This makes the input box text always appear selected, but the Delete and Backspace keys now work to clear the input box. Here is how the code now looks. If you have any suggestions on how to control the insertion point or solve the rendering of symNeg I'd enjoy hearing from you again. Once again, thanks for your assistance. <input id="Ans" type="text" class="txt" onkeydown="return keyPressed(event, this)" value="" /> function keyPressed(event,input) { var KC=event.keyCode; if (!isKCValid)return false; if (KC==8 || KC==46)return true; //let the browser handle Backspace & Delete if (KC==13) alert("Answered!"); //do something if Return was entered myAns=input.value; if (myAns=="?") myAns=""; //remove the "?" if it exists input.value=myAns; if (KC==189 || KC==109) //toggle negation { myAns=(myAns.charAt(0)==symNeg)?myAns.substring(1):symNeg+myAns; } else if ((KC>=48 && KC<=57)||(KC>=96 && KC<=105)) { if (KC>57) KC-=48; //fix numeric keyboard keyCodes myAns+=String.fromCharCode(KC); } input.value=myAns; input.select(); return false; } var symNeg= "\u02c9"; function isKCValid (kc) { //key code is 0-9, -, Backspace, Delete, of Return return ((kc>=48 && kc<=57) || (kc>=96 && kc<=105) || kc==8 || kc==46 || kc==13 || kc==189 || kc==109); } Code (markup):