输入密钥以在表单字段之间移动不起作用

时间:2014-01-28 11:55:03

标签: javascript html css

我使用回车键在表单字段之间移动,但它不起作用:

如果我按下回车键,

光标不会移动到表格中的其他字段。

如果我删除提交按钮就可以了。

由于提交按钮,它没有移动。

我应该怎么做才能帮助我的朋友们。

<HTML>
<Head>
<Script Language=JavaScript>

function toEOT(isField){

isRange = isField.createTextRange();
isRange.move('textedit');
isRange.select();
}

function actTab(isField){

if (event.keyCode == 13)
{
nextField = isField.tabIndex;
nextField++;
if (nextField < document.forms.Form1.length)
{document.forms.Form1[nextField].focus()}
else {document.forms.Form1[0].focus()}
}
}

function init(){

document.forms.Form1[0].focus();
}

window.onload=init;

</Script>
</Head>
<Body>
<Form name='Form1'>
<fieldset>
<legend>Fills</legend>
<input type=text value="This is Some Text" size=25 onFocus="toEOT(this)" onKeyUp="actTab(this)" tabindex='1'><br>
<input type=text value="Some Text" size=25 onFocus="toEOT(this)" onKeyUp="actTab(this)" tabindex='2'><br>
<input type=text value="Nothing" size=25 onFocus="toEOT(this)" onKeyUp="actTab(this)" tabindex='3'><br>
<input type=text value="Two Words" size=25 onFocus="toEOT(this)" onKeyUp="actTab(this)" tabindex='4'><br>
<select >
<option>geetha</option>
<option>geetha</option>
<option>geetha</option>
</select>
<select >
<option>geetha</option>
<option>geetha</option>
<option>geetha</option>
</select>
<input type=text value="Two Words" size=25 /><br>
<input style="margin:20px 20px 20px 250px;" type="submit" name="Submit" value="Submit"/>
</fieldset>
</Form>

</Body>
</HTML>

1 个答案:

答案 0 :(得分:0)

只需使输入键的行为与tab键一样容易,因为它不会有任何其他主要用途。

    function checkKey(e){
    if( e.keyCode == 13 ){ // if enter key
        var e = jQuery.Event('keydown'); // create a manual event
        e.which = e.charCode = 0;
        e.keyCode = 9; // set the new event to "tab"
        $(this.target).trigger(e); // trigger the new event (on the document)
        return false;  // cancels the original "enter" event from executing
        }
    }

    $(document).on('keydown', checkKey);