javascript - 按钮 onClick 阻止焦点在另一个表单字段上？

Question

我有几个输入字段的表单，其中一个输入字段有用户可以单击的按钮。单击该按钮后，焦点将自动跳转到顶部表单字段。我想防止关注任何字段，因为在这种情况下 onClick 将显示模式框。这是示例:

<form name="frmSaveuser" id="frmSaveuser" class="frm-agencySubmit" data-frm="SaveUser" autocomplete="off">
    <div class="form-group required">
        <label class="control-label" for="activestaff"><span class="label label-primary">Active Staff:<span></label>
        <select class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
             <option value="">-- Select the option --</option>
             <option value="0">No</option>
             <option value="1">Yes</option>
        </select>
    </div>
    <div class="form-group required">
        <label class="control-label" for="position"><span class="label label-primary">Position:</span></label>
        <div class="input-group">
            <input type="text" class="form-control" name="frmSaveaccount_position" id="frmSaveaccount_position" placeholder="Choose Position" readonly>
            <div class="input-group-btn">
                <button class="btn btn-success modal-master" name="btn-position" id="btn-position" data-code="position">
            <span class="glyphicon glyphicon-plus-sign"></span>
                </button>
            </div>
        </div>
    </div> 
</form>

这是 JQuery 代码:

$('.modal-master').on('click',showMaster);
function showMaster() {
    var masterCode = $(this).data('code');
    console.log(masterCode);
}

如果有人知道如何防止我的函数出现焦点，请告诉我。

Answer 1

它关注顶部字段，因为按钮元素的默认行为是提交表单。

如果您不想在按钮点击时提交表单，您必须将 type="button" 添加到按钮的 html

<button type="button" class="btn btn-success modal-master" name="btn-position" id="btn-position" data-code="position">