tobeyt23 Posted June 30, 2008 Share Posted June 30, 2008 This seems to work correctly in IE but not FF? var ev = (window.event) ? window.event : e; if (ev.keyCode == 13) { ev.keyCode = 9; return ev.keyCode; } Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 30, 2008 Share Posted June 30, 2008 e.keyCode is only a readable property (at least in FF). you will have to do a e.preventDefault() to stop the return, and then add a tab to the textarea dom element Quote Link to comment Share on other sites More sharing options...
tobeyt23 Posted June 30, 2008 Author Share Posted June 30, 2008 can you explain a little further ... not to clear. Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 30, 2008 Share Posted June 30, 2008 well, first, can you clarify some of my assumptions... I assume you are attaching this code to the onkeydown event on a textarea. So when the person presses Enter, it adds a Tab instead? If not, please detail further what you are trying to accomplish. EDIT: Or, just post the full code or at least a full example I can run on my computer Quote Link to comment Share on other sites More sharing options...
tobeyt23 Posted July 1, 2008 Author Share Posted July 1, 2008 I am trying to actually use the return key on text fields to tab to the next field. Code to follow Quote Link to comment Share on other sites More sharing options...
rhodesa Posted July 1, 2008 Share Posted July 1, 2008 I would not recommend interfering with the normal actions of elements. In a text field, if I hit enter, I expect to submit the form. If I want to move to the next element, I will use tab. If you are having problems with users accidentally submitting forms, you should add some form validation. And if that still isn't enough, have the data submit to a confirmation page, where they can review everything, and then click another submit button to finalize. ...that said, if you are set on doing what you want though...you will have to add onkeydown events to the elements, check for the enter key, block the event from submitting the form, and then move to the next element. I'll see if I can work up an example for you. Quote Link to comment Share on other sites More sharing options...
tobeyt23 Posted July 1, 2008 Author Share Posted July 1, 2008 I agree completely with you, however one on the key requirements for this app is the user has the ability to use the return key like the tab key. Thanks for you help! Quote Link to comment Share on other sites More sharing options...
rhodesa Posted July 1, 2008 Share Posted July 1, 2008 so...as far as i know...you can't just 'map' the return key to the enter key. you can 'catch' the return key, and then run javascript in it's place. here is an example of a form where i've overridden the return key to move to the next element...hope it sends you in the right direction: <html> <head> <script type="text/javascript"> function enterCheck ( e, next ) { if(!e || !e.keyCode || e.keyCode != 13) return true; //Return key was pressed..Stop normal action e.preventDefault(); //Move to next element for(var i = 0;i < this.form.length;i++){ if(this.form[i] == this){ i = (i + 1 == this.form.length) ? 0 : i + 1; if(this.form[i] && this.form[i].focus) this.form[i].focus(); return true; } } return true; } //Attach the events to all elements in the form function attachEnterCheck ( form ) { for(var i = 0;i < form.length;i++){ //Skip everything without a name if(form[i].name) form[i].onkeydown = enterCheck; } return true; } window.onload = function ( ) { return attachEnterCheck(document.forms['test']); } </script> </head> <body> <form name="test" method="post" action="test2.php"> <input type="text" name="field1" /><br/> <p>Here is a paragraph</p> <input type="text" name="field2" /><br /> A select field: <select name="foobar"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> <option value="4">Value 4</option> </select> <input type="radio" name="radio1" value="1" /> <input type="radio" name="radio1" value="2" /> <input type="radio" name="radio1" value="3" /> <br> <input type="submit" value="Submit" /> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
tobeyt23 Posted July 2, 2008 Author Share Posted July 2, 2008 Found this code and it works great only issue is it breaks when the next field is disabled, how can i avoid this? function enterToTab(formRef, focusAny) { for(var i=0, e=formRef.elements, len=e.length, hasNext=true; i<len && hasNext; i++) if( e[i].type && /^text|password|file/.test( e[i].type ) ) { for(var j=i+1; j<len && (!e[j].type || /submit|reset/.test(e[j].type)||( focusAny ? /hidden/.test(e[j].type): !/^text|password|file/.test(e[j].type)) ); j++) ; hasNext = j!=len; e[i].onkeypress=(function(index, notLast) { return function() { var ta=false, k=(arguments[0]?arguments[0].which:window.event.keyCode )!=13; if(!k && !(ta=(this.type=='textarea'&&this.value.length>0)) && notLast) { this.form.elements[index].focus(); this.form.elements[index].select(); } return k||ta; } })(j, hasNext); } } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.