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

使用事件阻止默认值：

首先将事件传递给您的函数，然后使用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>

Answer 2

它专注于top字段，因为button元素的默认行为是提交表单。

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

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

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

2 个答案: