Question

我目前正面临一个问题。

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

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

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

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

所以我的问题是如何控制单击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键将执行该事件 remeber 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;

将输入键聚焦到特定按钮

6 个答案: