文本框的表情符号属性data-emojiable="true"在按键时不起作用。

Question

我的初始HTML

<div class="p-10 p-chat-box">
<div class="input-group">
  <span  class="input-group-addon">
   <img src="assets/images/emojis/1f603.png" class="letter-icon">
  </span>
  <p class="lead emoji-picker-container"><input id="readyforchat" data-emojiable="true" type="text" class="form-control" placeholder="Add a message ..."></p>
  </span>' + attachMentList + '<span style="cursor:pointer;" onclick=NewsWidget.startchat(event) class="input-group-addon">
  <i class="icon-arrow-right6"></i>
  </span>
</div>
</div>

我正在使用emojji.js在文本框中生成表情，使用data-emojiable="true"属性后，HTML代码如下(input type="text"应用emojiable="true"属性)

使用"id=readyforchat"作为标识。但是我的问题是，jQuery的keypress事件在这个标识"readyforchat"上无法正常工作。请帮助我解决这个问题。谢谢！

- Mssrachita Mahajan

---

请再尝试添加您的代码。 - Dan Wilson

Answer 1

Please Add this code .
chat_form is claas of your form and chat_box is your chat input field class.

<script type="text/javascript">
$('.comment_reply_form').on('keydown', '.chat_box', function (e)
{
var key = e.which;
switch (key) {
case 13: // enter
//your code here
break;
default:
break;
}
});
</script>

- Mukesh Kumar

---

请在您的答案中添加一些描述。 - Rohit Poudel

Answer 2

对于onkey事件，请修改您的emojiarea.js文件，并将323行替换为以下代码

 this.$editor = $('<div onkeydown="comment(this,event)">').addClass('emoji-wysiwyg-editor').addClass($($textarea)[0].className);

调用函数

<script type="text/javascript">  
function comment(a,event){
var key = event.which;
if(key==13){
     event.preventDefault(event);

//your code
}
}
</script>

- Mukesh Kumar

Answer 3

我曾经遇到过类似的问题，通过使用父级 div 解决了它：

$('#message-zone-inner').on('keyup', function(e) {
        if (e.which == 13)
        {
            e.preventDefault();
            $('#message-zone-inner button').click();
        }
    });

所以基本上它会监测包含输入框的父级 div，检测是否按下了回车键并自动点击“发送”按钮（您也可以提交表单）。

- Bruno Leveque

Answer 4

你需要添加

"onkeypress": "return chatKeyPressed(event)"

在 jquery.emojiarea.js 文件中的第 351 行，在函数 this.$editor.attr 中。

this.$editor.attr({
    'data-id': id,
    'data-type': 'input',
    'placeholder': $textarea.attr('placeholder'),
    'contenteditable': 'true',
    "onkeypress": "return chatKeyPressed(event)"
});

现在你可以像下面这样在你的 HTML 中添加 JavaScript 函数

function chatKeyPressed(e) {
    //key is pressed
}

当按下键时将被调用

<input id="readyforchat" />

- Ammar