当单击按钮时,输入字段将自动聚焦
when a button will clicked an input field will auto focus
请参阅下面的fiddle链接。点击"电话1"部分的绿色按钮后,我需要用"电话2"部分的绿按钮集中输入。有可能吗?帮帮我。
看看这个jsfiddle
JS
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$formGroup.find('input[type=radio]').attr('disabled', 'true')
$(this).toggleClass('btn-success btn-add btn-danger btn-remove').html('<i class="fa fa-minus"></i>');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('Phone');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var selectFormGroup = function (event) {
// event.preventDefault();
// var $selectGroup = $(this).closest('.input-group-select');
// var param = $(this).attr("href").replace("#","");
// var concept = $(this).text();
// $selectGroup.find('.concept').text(concept);
// $selectGroup.find('.input-group-select-val').val(param);
}
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
});
})(jQuery);
HTML
<div class="col-xs-10">
<div style="padding-left:17px; padding-right:17px;">
<label>phone 1</label>
<div class="form-group multiple-form-group">
<div class="input-group">
<input type="text" name="contacts['value'][]" class="form-control" placeholder="Add email address" style="border-radius:0;"> <span class="input-group-btn">
<button type="button" class="btn btn-success btn-add" style="border-radius:0;">
<i class="fa fa-plus"></i>
</button>
</span>
</div>
<div class="clearfix">
<div class="col-xs-4" style="background:#fff;">
<div class="radio">
<label style="padding:0; width:100%; font-size:16px;">
<input type="radio" name="cell_no">Mobile</label>
</div>
</div>
<div class="col-xs-4" style="background:#fff;">
<div class="radio">
<label style="padding:0; width:100%; font-size:16px;">
<input type="radio" name="cell_no">Phone</label>
</div>
</div>
<div class="col-xs-4" style="background:#fff;">
<div class="radio">
<label style="padding:0; width:100%; font-size:16px;">
<input type="radio" name="cell_no">Work</label>
</div>
</div>
</div>
</div>
</div>
<div style="padding-left:17px; padding-right:17px;">
<label>phone 2</label>
<div class="form-group multiple-form-group">
<div class="input-group">
<input type="text" name="contacts['value'][]" class="form-control" placeholder="Add email address" style="border-radius:0;"> <span class="input-group-btn">
<button type="button" class="btn btn-success btn-add" style="border-radius:0;">
<i class="fa fa-plus"></i>
</button>
</span>
</div>
<div class="clearfix">
<div class="col-xs-4" style="background:#fff;">
<div class="radio">
<label style="padding:0; width:100%; font-size:16px;">
<input type="radio" name="cell_no">Mobile</label>
</div>
</div>
<div class="col-xs-4" style="background:#fff;">
<div class="radio">
<label style="padding:0; width:100%; font-size:16px;">
<input type="radio" name="cell_no">Phone</label>
</div>
</div>
<div class="col-xs-4" style="background:#fff;">
<div class="radio">
<label style="padding:0; width:100%; font-size:16px;">
<input type="radio" name="cell_no">Work</label>
</div>
</div>
</div>
</div>
</div>
</div>
您可以使用jQuerys focus()方法。像这样:
$formGroupClone.find('input[type=text]').focus()
您必须在addFormGroup中添加此行
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$formGroup.find('input[type=radio]').attr('disabled','true')
$(this).toggleClass('btn-success btn-add btn-danger btn-remove').html('<i class="fa fa-minus"></i>');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('Phone');
$formGroupClone.insertAfter($formGroup);
$formGroupClone.find('input[type=text]').focus()
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
jsfiddle也更新了http://jsfiddle.net/o6h1L9j8/5/
相关文章:
- 如何在angular bootstrap ui中聚焦活动导航选项卡中的拳头输入字段
- 使用 javascript 聚焦输入字段
- 在提交时检查正则表达式验证,如果为空,则聚焦所有输入字段
- jQuery:触发点击或聚焦输入字段
- 如何在输入字段以外的元素上触发聚焦
- 输入键以创建新行并聚焦当前输入字段
- 在检票口中刷新页面后重新聚焦输入字段
- 如何在加载网站后使输入字段聚焦
- 如何聚焦隐藏的输入字段
- jQuery在错误时将焦点重新聚焦到同一输入字段,无法在所有浏览器上运行
- 将光标聚焦在 HTML 上创建,然后在 Lightswitch 2013 中的属性字段之间移动光标
- AngularJS中模糊事件后的重新聚焦输入字段
- Javascript在所有聚焦的输入字段上运行函数
- 将光标聚焦到隐藏字段
- 如何聚焦/显示'选项卡窗格'如果使用jquery的bootstrap选项卡上的选项卡字段为空
- 当单击按钮时,输入字段将自动聚焦
- 在带有日历弹出窗口的输入字段中聚焦当前日期
- 按下回车按钮时聚焦字段
- 下一个元素的自动聚焦(autotab)对动态创建的字段不起作用
- 如何排除没有聚焦的输入字段