按钮 onClick 防止焦点在另一个表单域上？答案

【问题标题】：Button onClick prevent focus on another form field?按钮 onClick 防止焦点在另一个表单域上？
【发布时间】：2018-04-18 16:24:44
【问题描述】：

我有几个输入字段的表单，其中一个输入字段有用户可以点击的按钮。点击那个按钮后，焦点会自动跳转到最上面的表单域。我想避免关注任何字段，因为在这种情况下 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);
}

如果有人知道如何防止我的功能集中，请告诉我。

【问题讨论】：

你能提供一个有效的sn-p吗？
将事件传递给您的函数，然后使用 event.preventDefault();
@BooBerr'ita 这解决了问题！谢谢！
@espresso_coffee 不客气 :)

标签： javascript jquery twitter-bootstrap focus

【解决方案1】：

使用事件阻止默认值：

首先将事件传递给您的函数，然后使用event.preventDefault()；防止事件默认动作。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：