Replace textchange with native input event

app/assets/javascripts/app/views/publisher_view.js

@@ -21,7 +21,7 @@ app.views.Publisher = Backbone.View.extend({
     "focus textarea" : "open",
     "submit form" : "createStatusMessage",
     "click #submit" : "createStatusMessage",
-    "textchange #status_message_text": "checkSubmitAvailability",
+    "input #status_message_text": "checkSubmitAvailability",
     "click #locator" : "showLocation",
     "click #poll_creator" : "togglePollCreator",
     "click #hide_location" : "destroyLocation",
@@ -51,10 +51,6 @@ app.views.Publisher = Backbone.View.extend({
       this.$(".question_mark").hide();
     }
 
-    // this has to be here, otherwise for some reason the callback for the
-    // textchange event won't be called in Backbone...
-    this.inputEl.bind("textchange", $.noop);
-
     $("body").click(function(event) {
       var $target = $(event.target);
       if ($target.closest("#publisher").length === 0 && !$target.hasClass("dropdown-backdrop")) {
@@ -133,10 +129,6 @@ app.views.Publisher = Backbone.View.extend({
         if (photoAttachments.length > 0) {
           new app.views.Gallery({el: photoAttachments});
         }
-      },
-
-      onChange: function() {
-        self.inputEl.trigger("textchange");
       }
     };
 
@@ -368,8 +360,7 @@ app.views.Publisher = Backbone.View.extend({
 
     // clear text
     this.inputEl.val("");
-    this.inputEl.trigger("keyup")
-                .trigger("keydown");
+    this.inputEl.trigger("input");
     autosize.update(this.inputEl);
 
     // remove photos
@@ -403,9 +394,6 @@ app.views.Publisher = Backbone.View.extend({
     // clear poll form
     this.viewPollCreator.clearInputs();
 
-    // force textchange plugin to update lastValue
-    this.inputEl.data("lastValue", "");
-
     return this;
   },
 

lib/assets/javascripts/charcount.js

@@ -26,7 +26,7 @@ $.fn.charCount = function(opts) {
       counter.text(opts.allowed - count);
     };
 
-    $this.on("textchange", update);
+    $this.on("input", update);
     update();
   });
 };

spec/javascripts/lib/charcounter_spec.js

@@ -55,15 +55,15 @@ describe("$.fn.charCount", function() {
       expect(this.counter.text()).toEqual("99");
 
       this.input.val(this.repeat("a", 99));
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter.text()).toEqual("1");
 
       this.input.val(this.repeat("a", 102));
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter.text()).toEqual("-2");
 
       this.input.val("");
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter.text()).toEqual("100");
     });
 
@@ -74,27 +74,27 @@ describe("$.fn.charCount", function() {
       expect(this.counter).not.toHaveClass("text-danger");
 
       this.input.val(this.repeat("a", 90));
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter).not.toHaveClass("text-warning");
       expect(this.counter).not.toHaveClass("text-danger");
 
       this.input.val(this.repeat("a", 91));
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter).toHaveClass("text-warning");
       expect(this.counter).not.toHaveClass("text-danger");
 
       this.input.val(this.repeat("a", 100));
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter).toHaveClass("text-warning");
       expect(this.counter).not.toHaveClass("text-danger");
 
       this.input.val(this.repeat("a", 101));
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter).not.toHaveClass("text-warning");
       expect(this.counter).toHaveClass("text-danger");
 
       this.input.val("");
-      this.input.trigger("textchange");
+      this.input.trigger("input");
       expect(this.counter).not.toHaveClass("text-warning");
       expect(this.counter).not.toHaveClass("text-danger");
     });