将焦点设置在Enter键上的特定按钮上。

Question

我是一名有用的助手，可以为您进行翻译。以下是需要翻译的内容：

我目前面临一个问题。

我需要一个表单让用户填写，例如：

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

现在我需要一种方法，在用户填写表单中的最后一个文本框时，将焦点放在“保存”按钮上，这样即使用户单击“Enter”按钮，保存事件也会运行。通常情况下，这会自动发生，但问题是我的页面上有很多按钮，现在当用户单击保存时，会触发另一个我不想要的点击事件。所以我的问题是如何控制单击ENTER按钮时应该发生什么，或者我应该禁用此事件？

- Sboniso Marcus Nzimande

Answer 1

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

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

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

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

- Vivek S

---

谢谢，我会尝试这个方法。但是它不会失去对“mytextfield”字段的焦点吗？ - Sboniso Marcus Nzimande

@Sboniso Marcus Nzimande 创建了一个 JSFiddle，你可以去看看。 - Vivek S

很好的例子，我面临的问题是我的页面包含两种类型的按钮。有 type='submit' 和 type='image'。所以问题在于焦点总是在 type='submit' 按钮上，但当用户填完表单后，我需要它在 type='image' 上。 - Sboniso Marcus Nzimande

Answer 2

您需要将按钮放置在表单内部

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

这样，当您按下回车键时，事件将被执行。记得添加 type="submit"。

- Santiago Elvira Ramirez

---

我明白你的意思，但我的按钮是type='image'类型的。 - Sboniso Marcus Nzimande

Answer 3

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

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

然后在您的输入文本框中添加onkeypress属性

onkeypress="keyPressListener(event)"

- Vytalyi

Answer 4

不使用 JQuery，

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

上面的代码用于聚焦到你的元素

- Kumar Albert

Answer 5

在表单元素内，您还可以相应地指定按钮类型。焦点事件将优先于类型“提交”而不是类型“按钮”。

    //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;

- BrayoKane

Answer 6

这可能有助于解决

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>

- Murali Murugesan