[英]Twitter bootstrap - Focus on textarea inside a modal on click
[英]Focus on a textarea after custom text on a bootstrap floating modal form
我正在使用引导程序来调用一个简单的模式形式,该模式仅包含一个textarea字段和几个按钮。 我在调用模态表单时在文本区域中设置了一些自定义文本(可变长度)。 我想要的是在自定义文本之后专注于textarea字段,以便用户可以在此之后开始输入。 我在下面提到了我的实现。 谁能告诉我如何实现这一目标?
这是小提琴: http : //jsfiddle.net/jLymtdg8/
这里也有一些解释-
这是我的模态(所有引导程序内容)-
<div class="modal fade" id="msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Type a message</h4>
</div>
<div class="modal-body">
<textarea id="Message" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button id="PostModalButton" class="btn btn-primary btn-sm">Post</button>
</div>
</div>
</div>
这是如何被调用的-
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#msg" data-screenname="Type after this">
Post A Message
</button>
</div>
这就是我预填充文本区域并设置焦点的方式,但这只是将光标设置在第一行,而不是在screen_name之后-
$(this).on('shown.bs.modal', '#msg', setFieldAndFocus)
var setFieldAndFocus = function () {
var screen_name = $("button[data-target='#msg']").data("screenname");
$("#Message").val(screen_name + " ");
$("#Message").focus();
};
您可以参考以下链接: http : //jsfiddle.net/3kgbG/433/它对我有用 。
$('.launchConfirm').on('click', function (e) { $('#confirm') .modal({ backdrop: 'static', keyboard: false }) .on('') .one('click', '[data-value]', function (e) { if($(this).data('value')) { //alert('confirmed'); } else { //alert('canceled'); } }); }); $('#confirm').on('shown', function () { $('#txtDemo').val($('#txtDemo').val()); $('#txtDemo').focus(); // do something… })
body, .modal-open .page-container, .modal-open .page-container .navbar-fixed-top, .modal-open .modal-container { overflow-y: scroll; } @media (max-width: 979px) { .modal-open .page-container .navbar-fixed-top{ overflow-y: visible; } }
<div class="page-container"> <div class="container"> <br /> <button class="btn launchConfirm">Launch Confirm</button> </div> </div> <div id="confirm" class="modal hide fade"> <div class="modal-body"> Do you want to continue? <input id="txtDemo" type="text" value="Jayesh" class="form-control"/> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button> <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button> </div> </div>
山姆,您可以尝试以下javascript代码:-
var screen_name = '',
old_message = '',
new_message = '';
$("#msg").on('shown', function() {
screen_name = $("button[data-target='#msg']").data("screenname"),
old_message = $.trim($('#Message').val()),
new_message = ( old_message.length == 0 ) ? screen_name : old_message;
$("#Message").focus().val(new_message + " ");
});
让我解释一下为什么我使用了这段代码。 通过您提供的js小提琴链接,我了解到的是您正在使用bootstrap 2版本,但是您正在使用的代码
$("#msg").on('shown.bs.modal', function(){
...
}
仅在bootstrap 3中引入。因此我将其更改为
$("#msg").on('shown', function(){
...
}
和线
$("#Message").focus().val(new_message + " ");
用于您可以在自定义文本之后设置焦点。我希望这可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.