私はcontenteditable divを持っています。スマイリーコードをスマイリーイメージに置き換えたいkeyup/keydownイベント。私は画像にスマイリーコードを置き換える質問Replace smiley codes to imagesのマークされた回答コードを理解しています。contenteditable divのkeyupイベントを使用してテキストを画像に置き換える

私はkeyup/keydownイベントのために修正しようとしましたが、動作しません。以下は、その修正されたコードのスニペットです。

var emoticons = { 
 
     ':-)' : 'chair.gif', 
 
     ':)' : 'cheers1.gif', 
 
     ':D' : 'clapping.gif', 
 
     ':-|' : 'dance.gif' 
 
     }; 
 

 
    var url = "http://digitalsetups.com/emoji/"; 
 
    var patterns = []; 
 
    var metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g; 
 
     
 
    // build a regex pattern for each defined property 
 
    for (var i in emoticons) { 
 
     if (emoticons.hasOwnProperty(i)){ // escape metacharacters 
 
     patterns.push('('+i.replace(metachars, "\\$&")+')'); 
 
     } 
 
    } 
 
    // Building Regex Expression 
 
    var regex = new RegExp(patterns.join('|'),'g'); 
 

 
    // My modification starts here to replace smiley code to image on keyup/keydown events 
 
    $(document).ready(function(){ 
 
     $("#chatMessage").keyup(function(){ 
 
     // var start = this.selectionStart; 
 
      $("#chatMessage").html($("#chatMessage").html().replace(regex, 
 
    \t \t \t \t function (match) { 
 
     \t \t \t \t return typeof emoticons[match] != 'undefined' ? 
 
       \t \t \t \t '<img src="'+url+emoticons[match]+'"/>' : 
 
       \t \t \t \t match; 
 
     \t \t \t \t })); 
 
     // this.selectionEnd = start; 
 
      }); 
 
    });

#chatMessage { 
 
max-height: 20px; 
 
max-width: 400px; 
 
overflow: auto; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
    </script> 
 
    </head> 
 
    <body> 
 
     <div id="chatMessage" contenteditable>This is contenteditable div. Press space to change :) into image. Or :-) into another image.</div> 
 
    </body> 
 
</html>

UPDATE：

私はjQueryのコードを更新しました。 val()からhtml()をkeyup function()の定義に変更しました。私がそれを変更すると、キーアップ時にコードに変更されますが、カーソルは、の1文字を書き込むたびに行頭に移動します。
私はselectionStartと selectionEndのソリューションを試しました（コードでコメントしました）。何もないが発生します。また、開始位置を選択する場合は、 と終了位置を選択してください。カーソルはですが、スマイリーコードは変更されません。あなたが取得し、要素のinnerHTMLを設定したいので、jQueryの.html()メソッドを使用します -

出典

2017-06-18 Suman Khan

.val()は、このために使用する適切な方法ではありません。

出典

2017-06-18 21:00:25

よし。私はval（）をhtml（）に変更しましたが、現在はコードを画像に変更していますが、1文字しか書き込めません。 1文字書くとすぐに、ポインタの位置がdivの先頭に移動します。 –

@SumanKhanはい、HTMLを設定するとdivの以前の内容が破棄されるためです。これを修正するには、[Selection API]（https://developer.mozilla.org/en-US/docs/Web/API/Selection）を参照する必要があります。それはグロスですが、それは仕事です。 –

問題。：/質問の更新部分をご覧ください。 –

これは、すべてのcontenteditablesに対してonを使用するより効率的なバージョンです。特に、コンテンツ編集可能なアイテムがチャットボックスである場合は、ユーザーがキーアップするだけでなく、

var emoticons = { 
 
     ':-)' : 'chair.gif', 
 
     ':)' : 'cheers1.gif', 
 
     ':D' : 'clapping.gif', 
 
     ':-|' : 'dance.gif' 
 
     }; 
 

 
    var url = "http://digitalsetups.com/emoji/"; 
 
    var patterns = []; 
 
    var metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g; 
 
     
 
    // build a regex pattern for each defined property 
 
    for (var i in emoticons) { 
 
     if (emoticons.hasOwnProperty(i)){ // escape metacharacters 
 
     patterns.push('('+i.replace(metachars, "\\$&")+')'); 
 
     } 
 
    } 
 
    // Building Regex Expression 
 
    var regex = new RegExp(patterns.join('|'),'g'); 
 

 
    // My modification starts here to replace smiley code to image on keyup/keydown events 
 
    $(function(){ 
 
     $("#chatMessage").on('blur keyup paste input', function(){ 
 
     // var start = this.selectionStart; 
 
      $("#chatMessage").html($("#chatMessage").html().replace(regex, 
 
    \t \t \t \t function (match) { 
 
     \t \t \t \t return typeof emoticons[match] != 'undefined' ? 
 
       \t \t \t \t '<img src="'+url+emoticons[match]+'"/>' : 
 
       \t \t \t \t match; 
 
     \t \t \t \t })); 
 
     // this.selectionEnd = start; 
 
      }); 
 
    });

#chatMessage { 
 
max-height: 20px; 
 
max-width: 400px; 
 
overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="chatMessage" contenteditable>This is contenteditable div. Press space to change :) into image. Or :-) into another image.</div>

出典

2017-06-19 07:15:59

アハン。あなたの提案をありがとう。 +1してください。あなたは、更新で述べたようなカーソルの問題で私を助けることができますか？ –

contenteditable divのkeyupイベントを使用してテキストを画像に置き換える

UPDATE：

答えて

関連する問題