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; } Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/ 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 Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-578287 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. Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-578326 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 Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-578345 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 Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-579030 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. Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-579062 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! Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-579069 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> Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-579081 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); } } Link to comment https://forums.phpfreaks.com/topic/112598-return-key-as-tab-key/#findComment-580323 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.