关注引导浮动模态表单上自定义文本之后的文本区域

Focus on a textarea after custom text on a bootstrap floating modal form

本文关键字：文本 自定义 之后 区域 表单 模态      更新时间：2023-09-26

我正在使用bootstrap来调用一个简单的模态表单，该表单只包含一个文本区域字段和几个按钮。在调用模态表单时，我在文本区域设置了一些自定义文本（可变长度）。我想把重点放在自定义文本之后的文本区域字段上，这样用户就可以在之后开始打字了。我在下面提到了我对此的实现。有人能告诉我们如何做到这一点吗？

这是Fiddle：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">&times;</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>

这就是我预填充文本区域和设置焦点的方式，但这只是将光标设置在第一行，而不是屏幕名称-之后

$(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();
};

Sam您可以尝试以下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-fiddle链接中，我知道你使用的是bootstrap 2版本，但你使用的代码是

$("#msg").on('shown.bs.modal', function(){
  ...
}

仅在引导程序3中引入。所以我把它改成了

$("#msg").on('shown', function(){
...
}

和线路

$("#Message").focus().val(new_message + " ");

以便您可以在自定义文本之后设置焦点。我希望这能解决你的问题。

您可以参考此链接：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>

相关文章：