如何在BootstrapDialog中设置焦点在input元素上

时间:2017-05-22 08:31:32

标签: javascript bootstrap-modal

我有一个带有输入元素和其他东西的BootstrapDialog,我需要在BootstrapDialog出现时将焦点设置在input元素上。

这是我的代码:

<div class="row"><div class="input-group"><span class="input-group-addon">Rechercher</span><input type="text" id="code_recherche" value="" onkeyup="completerClient(event,this.id,'clientnom','Liste des clients','remplirZonesClientAdrEnvoi','',true);" class="form-control" placeholder="Tapez un code..."></div>

enteteZoneRecherche就是这样:

<div id="tableauResultat" class="row" style="height:350px;overflow-y: scroll"><table class="table table-bordered table-hover"><tr><th>Code</th><th>Nom</th><th>Ville</th></tr><tr id="idTr_1106" onclick="remplirZonesClientAdrEnvoi(this.id);"><td>000006</td><td>ARSENE</td><td>Brest</td></tr><tr id="idTr_1107" onclick="remplirZonesClientAdrEnvoi(this.id);"><td>100004</td><td>ANQUETIL</td><td>BRIVES</td></tr></table></div>

和resTab:

{{1}}

我需要关注&#34; code_recherche&#34;。

我该怎么做?

1 个答案:

答案 0 :(得分:1)

官方的bootstrap文档就是一个例子 http://getbootstrap.com/javascript/#modals

来自文档的示例

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

使用BoostrapDialog类时,同样的事情看起来像

onshown: function(dialogRef){
   $('#myInput').focus();
}

所以你的最终代码看起来像

if (instanceDialogClientDonneur == null  ) {
    instanceDialogClientDonneur = new BootstrapDialog.show({
        title : titre,
        cssClass : 'lieu-dialog',
        modal : true,

        closeOnEscape : true,
        onhidden : function() {             
            instanceDialogClientDonneur =null;
        },
        onshown: function(){
            $('#code_recherche').focus();
        }
        message : enteteZoneRecherche + resTab +"</div>"
    });
}
相关问题