在引導程序浮動模態形式上的自定義文本之后，專注於文本區域

Question

我正在使用引導程序來調用一個簡單的模式形式，該模式僅包含一個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">&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>

這就是我預填充文本區域並設置焦點的方式，但這只是將光標設置在第一行，而不是在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();
};

Answer 1

您可以參考以下鏈接： 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> 

Answer 2

山姆，您可以嘗試以下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 + " ");

用於您可以在自定義文本之后設置焦點。我希望這可以解決您的問題。