Modal bootstrap et autofocus textarea
Bonsoir,
Je tente de mettre le focus sur les textarea de chacune de mes modals bootstrap, mais en vain.
J'ai tenté l'attribut html autofocus, qui ne fonctionne pas, je tente de l'ajouter à la fonction js qui charge toute mes modals
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <div>
<form method="POST" action="{{ path('message_maj_chat') }}">
<textarea name="content" class="form-control" tabindex="1" autofocus></textarea>
<input type="hidden" name="isoffer" value="1"/>
<input type="hidden" value="{{ id_client }}" name="client"/>
<label class="giveMeSpace">Choisir le produit concerné :</label>
<input class="form-control" name="product" id="searchProduct"/>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</form>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| $('a.btn-modal').click(function(){
var that = $(this);
$.get( $(this).attr('href'), function(htmlBack){
$('div.modal .modal-title').html(that.attr('data-title'));
$('div.modal .modal-body').html(htmlBack);
$('div.modal').modal('show');
// Tentative de focus des textarea contenant tabindex="1"
console.log($('.modal-body [tabindex="1"]').attr('class'));
$('.modal-body [tabindex="1"]').val('va me pendre ! ').focus();
/**
* Send modal form
*/
$('div.modal .modal-body form').submit(function(){
var that = $(this);
$.ajax({
method: "post",
url: that.attr('action'),
data: that.serialize(),
success: function(){
$('div.modal').modal('hide');
window.location.reload();
}
});
return false;
});
});
return false;
}); |
Le console.log me retourne bien la class du textarea soit "form-control", rempli bien la value "va me pendre ! " mais ne focus pas le textarea. Pourtant une fois la modal chargée, via la console de firefox la meme ligne met bien le textarea en focus...
