2

テキストボックス内に新しい絵文字を挿入するとき、絵文字シンボルではなく絵文字画像として表示したいのですが、代わりにどのようにそれを行うことができますか ( ':)'--> テキストボックス内に画像を表示します)

4

2 に答える 2

4

1つの方法：テキストボックスの代わりに、を使用し<div contenteditable="true"></div>ます。ユーザーが入力するときに、画像のスマイリーの出現箇所を変更します。フォームが送信されると、JavaScriptはそのdivの内容をプレーンテキストに変換し直して、送信用のフィールドに配置する必要があります。

于 2013-03-12T11:27:46.330 に答える
3

画像を使用する場合は、HTML を大幅に変更する必要があります。通常の入力ボックスではなく、 のようなものでContent Editable機能を利用する必要があります。<span>次に、キープレス イベントを監視するための JavaScript コードが必要:)です<img>。

ただし、テキスト ボックスに固執する手っ取り早い解決策は、同じアプローチを使用することですが、Unicode 絵文字(画像ではなく) を使用することです。これは、適切なフォントグリフを備えたプラットフォームでのみ機能しますが、一般的なスマイリーはより広くサポートされていますが、次のようなアイデアが得られます。

HTML:

<input class="emojify" type="text" />

JavaScript (みんなの生活を楽にするために jQuery を使用):

$(document).ready(function() {
  // Map plaintext smilies to Unicode equivalents
  var emoji = {
                ':)': '\u263a',
                ':(': '\u2639'
              },

      // Function to escape regular expressions
      reEscape = function(s) {
                   return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                 };

  $('input.emojify').keyup(function() {
    var text = $(this).val();

    // See if any of our emoji exist in the text and replace with Unicode
    $.each(emoji, function(plaintext, unicode) {
       text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
    });

    // Replace text with new values
    $(this).val(text);
  });
});

jsFiddleで動作するデモを次に示します。keyupイベントがトリガーされるたびに、キャレットの位置がリセットされることに注意してください。何らかの方法で回避できると思いますが、プロセスを説明するにはこのコードで十分です。

于 2013-03-12T11:34:34.090 に答える