javascript - 将输入键聚焦到特定按钮

Question

我目前面临一个问题。

我需要有一个表格由用户填写，即：

field1: <input type='text' name='field1'>
field1: <input type='text' name='field1'>
<input type='button' value='Save' name='Save'>

所以现在我需要在用户填写表单中的最后一个文本框时关注“保存”按钮的方法，这样即使用户点击“输入”按钮，保存事件也会运行。

这通常会自动发生，但问题是我的页面中有很多按钮，现在当用户点击保存另一个点击事件（我不想要的）时会被触发。

所以我的问题是如何控制单击 ENTER 按钮时应该发生的情况，还是应该禁用此事件？

Answer 1

实现这一点的方法是使用 javascript，我建议您使用 jQuery。

$('#mytextfield').change(function(e) {
    $('input[type=submit]').focus();
});

您还可以通过添加属性 autofocus="autofocus" 在 HTML5 上自动对焦元素

看看小演示：http: //jsfiddle.net/9WmQ5/

Answer 2

您必须将按钮放在表单中

<form>
<input type="submit" value='Save' name='Save'>
</form>

这样，当您按 Enter 时，将执行事件，记住 type="submit"

Answer 3

您可以编写一个函数来监听按下了哪个键

function keyPressListener(e) {
        if (e.keyCode == 13) {
                 // do something
    }
}

然后将 onkeypress 属性添加到您的输入文本框

onkeypress="keyPressListener(event)"

Answer 4

这可以帮助解决

field1: <input type='text' name='field1'>
field1: <input type='text' name='field1' id='last-name'>
<input type='button' value='Save' id='save-btn' name='Save'>


<script>

$(document).ready(function(){
$('#last-name').blur(function(){ $('#save-btn').focus(); });

});

</script>

Answer 5

不使用 JQuery，

document.getElementById('idName').focus();

上面的行用于关注您的元素

Answer 6

在 Form 元素中，您还可以相应地指定按钮类型。与输入“按钮”相比，焦点事件将优先输入“提交”

    //HTML
    <form [formGroup]="loginForm">
      <mat-form-field appearance="outline" class="form_field">
        <input formControlName="otpcode" id="otpcode" matInput 
            placeholder="Enter OTP" type="text">
            <mat-error *ngIf="!loginForm.get('otpcode').valid && 
                loginForm.get('otpcode').touched"
                 class="text-danger small position-absolute">This 
                 field is required
            </mat-error>
       </mat-form-field>

      <button type="button" mat-raised-button> Resend OTP </button>
      <button type="submit" mat-raised-button> Login </button>
    </form>

    //TS
   loginForm: FormGroup;