Discussion :

[XeGregory]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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"

[XeGregory]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Invité]

Donc ??

En jQuery, ça s'écrit :

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[XeGregory]

Donc ??

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