jmadler / emoji-picker

Add a slick emoji selector to input fields and textareas on your website.
Other
1.31k stars 318 forks source link

Pressing the enter key in text input that has data-emojiable="true" does not trigger ng-click event bound to button #48

Open Exponent500 opened 7 years ago

Exponent500 commented 7 years ago

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>`
GuillaumeBONHOMMEAU commented 7 years ago

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.

yash2code commented 7 years ago

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.

Manchister commented 4 years ago
 <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>