Insérer du texte textarea

Version imprimable

Bonjour,

J'ai une petit problème que je n'arrive pas à comprendre, voila mon code qui permet d’inséré un code émoji lorsqu'on clique sur l'image (Href), mon code fonctionne très bien sur PC mais impossible de le faire fonctionné sur téléphone.

JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('#emojis a').click(function() {
     var smiley = $(this).attr('title');
     ins2pos(smiley, 'textbox');
 });
 
 function ins2pos(str, id) {
     var TextArea = document.getElementById(id);
     var val = TextArea.value;
     var before = val.substring(0, TextArea.selectionStart);
     var after = val.substring(TextArea.selectionEnd, val.length);
     TextArea.value = before + str + after;
 }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="btn-group">
  <button type="button" class="btn btn-secondary btn-sm tweet-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Emojis
  </button>
  <div class="dropdown-menu dropdown-menu-right">
      <div class="card-emojis" id="emojis">
         <a title=" :hungry: " href="#!"><img id="im" src="assets/images/emojis/1.png" /></a>
         <a title=" :tongue-out: " href="#!"><img id="im" src="assets/images/emojis/2.png" /></a>
         <a title=" :megafrown: " href="#!"><img id="im" src="assets/images/emojis/3.png" /></a>
         <a title=" :unamused: " href="#!"><img id="im" src="assets/images/emojis/4.png" /></a>
         <a title=" :happy: " href="#!"><img id="im" src="assets/images/emojis/5.png" /></a>
         <a title=" :angry: " href="#!"><img id="im" src="assets/images/emojis/6.png" /></a>
         <a title=" :heart: " href="#!"><img id="im" src="assets/images/emojis/7.png" /></a>
         <a title=" :heart-broken: " href="#!"><img id="im" src="assets/images/emojis/8.png"/></a>        
      </div>
  </div>
</div>

Auriez vous une petit idée ?

Merci.

07/04/2018, 08h22
Invité

Bonjour,

L'action au click est en jQuery, alors que la fonction est en JavaScript pur.

Sauf erreur, en JavaScript pur, pour un textarea il faut utiliser .innerHTML.
Sinon, traduis la fonction en jQuery, en utilisant .val().

N.B. id="im" ne va pas : un id doit être unique.
Remplace par class="im"

bonjour jreaux62,

Je n'arrive pas à comprend, de cette façon le code fonctionne sur les 2 (Mobile & PC)

j'ai remplacer le buttons "Dropdowns" par un buttons "Collapse"

JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 $('.card-emojis a').click(function() {
     var smiley = $(this).attr('title');
     ins2pos(smiley, 'tweet-textbox');
 });
 
 function ins2pos(str, id) {
     var TextArea = document.getElementById(id);
     var val = TextArea.value;
     var before = val.substring(0, TextArea.selectionStart);
     var after = val.substring(TextArea.selectionEnd, val.length);
     TextArea.value = before + str + after;
 }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button class="btn btn-secondary btn-sm tweet-btn" type="button" data-toggle="collapse" data-target="#emojis" aria-expanded="false"><?php echo $btnemoji; ?></button>
<div class="collapse" id="emojis">
   <div class="card card-body">
      <div class="card-emojis">
         <a title=" :smiling: " href="#!"><img src="assets/images/emojis/1.png" /></a>
         <a title=" :relieved: " href="#!"><img src="assets/images/emojis/2.png" /></a>
         <a title=" :grinning: " href="#!"><img src="assets/images/emojis/3.png" /></a>
         <a title=" :clin-doeil: " href="#!"><img src="assets/images/emojis/4.png" /></a>
         <a title=" :tongue: " href="#!"><img src="assets/images/emojis/5.png" /></a>
         <a title=" :rol-laughing: " href="#!"><img src="assets/images/emojis/6.png" /></a>
         <a title=" :frowning: " href="#!"><img src="assets/images/emojis/7.png" /></a>
         <a title=" :sleepy: " href="#!"><img src="assets/images/emojis/8.png" /></a> 
      </div>      
   </div>
</div>

Donc :resolu: ??

En jQuery, ça s'écrit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('.card-emojis a').on('click', function() {
  var smiley = $(this).attr('title');
  ins2pos(smiley, '#tweet-textbox');
});
 
function ins2pos(str, id) {
  var TextArea = $(id);
  var val = TextArea.val();
  var before = val.substring(0, TextArea[0].selectionStart);
  var after = val.substring(TextArea[0].selectionEnd, val.length);
  TextArea.val(before + str + after);
}

07/04/2018, 11h48
XeGregory

Citation:

Envoyé par jreaux62

Donc :resolu: ??

Malheureusement non :( , toujours le mème problème, sa ne fonctionne pas sur téléphone.