prevent paste beyond max length

jmadler · Jun 20, 2017 · dd70515 · dd70515
1 parent 5dc2afa
commit dd70515
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ Add `data-emoji-input="unicode"` to your input field. Only the `unicode` value i
 
 **I want to limit my input field to a certain number of characters (maxlength)**
 
-The `maxlength` property is mostly supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length. Unfortunately, you can paste more than the maxlength number of characters, so that needs to be fixed.
+The `maxlength` property is supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length.
 
 **I want classes from my original input field to be copied over to the rich emoji input area**
 

diff --git a/demo/index.html b/demo/index.html
@@ -31,6 +31,9 @@ <h1>emoji-picker</h1>
             <p class="lead emoji-picker-container">
               <input type="email" class="form-control" placeholder="Input field" data-emojiable="true">
             </p>
+            <p class="lead emoji-picker-container">
+              <input type="email" class="form-control" placeholder="Input with max length of 10" data-emojiable="true" maxlength="10">
+            </p>
             <p class="lead emoji-picker-container">
               <textarea class="form-control textarea-control" rows="3" placeholder="Textarea with emoji image input" data-emojiable="true"></textarea>
             </p>

diff --git a/lib/js/jquery.emojiarea.js b/lib/js/jquery.emojiarea.js
@@ -387,24 +387,32 @@
       self.updateBodyPadding(editorDiv);
     });
 
-    if (this.options.onPaste) {
-      var self = this;
-      this.$editor.on("paste", function (e) {
-        e.preventDefault();
-
-        if ((e.originalEvent || e).clipboardData) {
-          var content = (e.originalEvent || e).clipboardData.getData('text/plain');
-          var finalText = self.options.onPaste(content);
-          document.execCommand('insertText', false, finalText);
+    this.$editor.on("paste", function (e) {
+      e.preventDefault();
+      var content;
+      var charsRemaining = editorDiv.attr('maxlength') - (editorDiv.text().length + editorDiv.find('img').length);
+      if ((e.originalEvent || e).clipboardData) {
+        content = (e.originalEvent || e).clipboardData.getData('text/plain');
+        if (self.options.onPaste) {
+          content = self.options.onPaste(content);
         }
-        else if (window.clipboardData) {
-          var content = window.clipboardData.getData('Text');
-          var finalText = self.options.onPaste(content);
-          document.selection.createRange().pasteHTML(finalText);
+        if (charsRemaining < content.length) {
+          content = content.substring(0, charsRemaining);
         }
-        editorDiv.scrollTop(editorDiv[0].scrollHeight);
-      });
-    }
+        document.execCommand('insertText', false, content);
+      }
+      else if (window.clipboardData) {
+        content = window.clipboardData.getData('Text');
+        if (self.options.onPaste) {
+          content = self.options.onPaste(content);
+        }
+        if (charsRemaining < content.length) {
+          content = content.substring(0, charsRemaining);
+        }
+        document.selection.createRange().pasteHTML(content);
+      }
+      editorDiv.scrollTop(editorDiv[0].scrollHeight);
+    });
 
     $textarea.after("<i class='emoji-picker-icon emoji-picker " + this.options.popupButtonClasses + "' data-id='" + id + "' data-type='picker'></i>");