emoji-picker
emoji-picker copied to clipboard
Pressing the enter key in text input that has data-emojiable="true" does not trigger ng-click event bound to button
Anyone else having this problem? See code below. I'd expect that when you type text into the input and press the enter key it should trigger the ng-click event. It does so when when I remove the data-emojiable="true" from the input field...
<form name="chatMessage"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button" ngf-select="vm.upload($file)">+</button> </span> <input type="text" class="form-control" ng-model="vm.chatMessage" data-emojiable="true"> <span class="input-group-btn"> <button id="send-message-button" type="submit" class="btn btn-default" ng-click="vm.sendChatMessage()">Send </button> </span> </div> </form>
Had the same problem. One way to solve it could be to add complementary attributes to the generated div. In "jquery.emojiarea.js" line 346, you can see what attributes will be added to generated div. What I personnaly added is : "id":"myid", "onkeypress":"return myKeyPressFunction(event)", "tabindex":"1"
Adding the "tabindex" attribute make the div more selectable for what we usually intend to do here.
I have this span :
<span data-emojiable="true" class="abcd" onkeydown="isnottyping('+response.friend.id+')" onkeyup="istyping('+response.friend.id+')" name="message-to-send" id="message-to-send'+response.friend.id+'" placeholder="Type your message now" rows="3" style="color:black!important;"/>
After using emojipicker , onkeydown and onkeyup stopped working.
<script>
$(document).ready(function() {
$("#msg_input").emojioneArea({
pickerPosition: "top",
tonesStyle: "radio"
});
setTimeout(addEventListeners,3000);
});
function addEventListeners(){
$('.emojionearea-editor').on('keydown', function (e) {
if (e.which == 13) {
newMessage();
return false;
}
});
}
</script>