Merge pull request #10 from mycolorway/fix-multiline-with-textarea

FIX: 当内容过长时自动换行
mycolorway · Apr 13, 2016 · a6a5741 · a6a5741
2 parents 019c184 + 0de32c7
commit a6a5741
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 17 deletions.
diff --git a/demo.html b/demo.html
@@ -79,7 +79,7 @@ <h3>Demo one: without non value option</h3>
             <select id="select-one">
                 <option value="0" data-hint="#1" data-key="George Washington">George Washington</option>
                 <option value="1" data-hint="#2" data-key="John Adams">John Adams</option>
-                <option value="2" data-hint="#3" data-key="Thomas Jefferson">Thomas Jefferson</option>
+                <option value="2" data-hint="#3" data-key="Thomas Jefferson">Thomas Jefferson Juan Mata</option>
             </select>
         </div>
 

diff --git a/lib/select.js b/lib/select.js
@@ -48,7 +48,7 @@ Select = (function(superClass) {
   };
 
   Select._tpl = {
-    input: "<input type=\"text\" class=\"select-result\" autocomplete=\"off\">",
+    input: "<textarea rows=1 type=\"text\" class=\"select-result\" autocomplete=\"off\"></textarea>",
     item: "<div class=\"select-item\">\n  <a href=\"javascript:;\" class=\"label\"><span></span></a>\n  <span class=\"hint\"></span>\n</div>"
   };
 
@@ -62,7 +62,8 @@ Select = (function(superClass) {
       ref.destroy();
     }
     this._render();
-    return this._bind();
+    this._bind();
+    return this.autoresizeInput();
   };
 
   Select.prototype._render = function() {
@@ -105,6 +106,7 @@ Select = (function(superClass) {
       if (this.items.length > 0) {
         this.list.show();
       }
+      this.list.css("top", this.input.outerHeight() + 4);
       if (this._selectedIndex > -1) {
         return this._scrollToSelected();
       }
@@ -155,7 +157,7 @@ Select = (function(superClass) {
         return false;
       };
     })(this));
-    return this.input.on("keydown.select", (function(_this) {
+    this.input.on("keydown.select", (function(_this) {
       return function(e) {
         return _this._keydown(e);
       };
@@ -172,6 +174,11 @@ Select = (function(superClass) {
         return _this._focus(e);
       };
     })(this));
+    return this.select.on("mousedown", (function(_this) {
+      return function(e) {
+        return _this.input.focus();
+      };
+    })(this));
   };
 
   Select.prototype._keydown = function(e) {
@@ -187,7 +194,7 @@ Select = (function(superClass) {
         this._expand();
         $itemEls = this.list.find(".select-item").show();
         if (this._selectedIndex < 0) {
-          return $itemEls.first().addClass("selected");
+          $itemEls.first().addClass("selected");
         }
       } else {
         $selectedEl = this.list.find(".select-item.selected");
@@ -199,13 +206,13 @@ Select = (function(superClass) {
           $prevEl = $selectedEl.prevAll(".select-item:visible:first");
           if ($prevEl.length) {
             $selectedEl.removeClass("selected");
-            return $prevEl.addClass("selected");
+            $prevEl.addClass("selected");
           }
         } else if (e.which === 40) {
           $nextEl = $selectedEl.nextAll(".select-item:visible:first");
           if ($nextEl.length) {
             $selectedEl.removeClass("selected");
-            return $nextEl.addClass("selected");
+            $nextEl.addClass("selected");
           }
         }
       }
@@ -229,22 +236,24 @@ Select = (function(superClass) {
       return false;
     } else if (e.which === 27) {
       e.preventDefault();
-      return this.input.blur();
+      this.input.blur();
     } else if (e.which === 8) {
       if (this.select.hasClass("selected")) {
         this.clearSelection();
       }
       if (!this.input.hasClass("expanded")) {
-        return this._expand();
+        this._expand();
       }
     }
+    return this.autoresizeInput();
   };
 
   Select.prototype._keyup = function(e) {
     var $itemEls;
     if ($.inArray(e.which, [13, 40, 38, 9, 27]) > -1) {
       return false;
     }
+    this.autoresizeInput();
     if (this._keydownTimer) {
       clearTimeout(this._keydownTimer);
       this._keydownTimer = null;
@@ -390,6 +399,7 @@ Select = (function(superClass) {
       this._selectedIndex = index;
       this.el.val(item._value);
       this.trigger("select", [item]);
+      this.autoresizeInput();
     }
     if (this._selectedIndex > -1) {
       return this.items[this._selectedIndex];
@@ -402,7 +412,17 @@ Select = (function(superClass) {
     this.list.hide().find(".select-item").show().removeClass("selected");
     this._selectedIndex = -1;
     this.el.val('');
-    return this.trigger("clear");
+    this.trigger("clear");
+    return this.autoresizeInput();
+  };
+
+  Select.prototype.autoresizeInput = function() {
+    return setTimeout((function(_this) {
+      return function() {
+        _this.input.css("height", 0);
+        return _this.input.css("height", parseInt(_this.input.get(0).scrollHeight) + parseInt(_this.input.css("border-top-width")) + parseInt(_this.input.css("border-bottom-width")));
+      };
+    })(this), 0);
   };
 
   Select.prototype.disable = function() {

diff --git a/src/select.coffee b/src/select.coffee
@@ -19,7 +19,7 @@ class Select extends SimpleModule
 
   @_tpl:
     input: """
-      <input type="text" class="select-result" autocomplete="off">
+      <textarea rows=1 type="text" class="select-result" autocomplete="off"></textarea>
     """
 
     item: """
@@ -37,6 +37,7 @@ class Select extends SimpleModule
     @opts.el.data("select")?.destroy()
     @_render()
     @_bind()
+    @autoresizeInput()
 
 
   _render: ->
@@ -94,6 +95,7 @@ class Select extends SimpleModule
     else
       @input.addClass "expanded"
       @list.show() if @items.length > 0
+      @list.css("top", @input.outerHeight() + 4)
       @_scrollToSelected() if @_selectedIndex > -1
 
 
@@ -135,6 +137,9 @@ class Select extends SimpleModule
     .on "focus.select", (e) =>
       @_focus(e)
 
+    @select.on "mousedown", (e) =>
+      @input.focus()
+
 
   _keydown: (e) ->
     return unless @items and @items.length
@@ -188,10 +193,12 @@ class Select extends SimpleModule
     else if e.which is 8  # backspace
       @clearSelection() if @select.hasClass "selected"
       @_expand() unless @input.hasClass "expanded"
+    @autoresizeInput()
 
 
   _keyup: (e) ->
     return false if $.inArray(e.which, [13, 40, 38, 9, 27]) > -1
+    @autoresizeInput()
 
     if @_keydownTimer
       clearTimeout(@_keydownTimer)
@@ -306,6 +313,7 @@ class Select extends SimpleModule
       @_selectedIndex = index
       @el.val item._value
       @trigger "select", [item]
+      @autoresizeInput()
 
     return @items[@_selectedIndex] if @_selectedIndex > -1
 
@@ -321,6 +329,14 @@ class Select extends SimpleModule
     @_selectedIndex = -1
     @el.val ''
     @trigger "clear"
+    @autoresizeInput()
+
+
+  autoresizeInput: () ->
+    setTimeout () =>
+      @input.css("height", 0)
+      @input.css("height", parseInt(@input.get(0).scrollHeight) + parseInt(@input.css("border-top-width")) + parseInt(@input.css("border-bottom-width")))
+    , 0
 
 
   disable: ->

diff --git a/styles/select.css b/styles/select.css
@@ -5,7 +5,11 @@
 .simple-select .select-result {
   width: 100%;
   height: 24px;
+  resize: none;
+  overflow: hidden;
   box-sizing: border-box;
+  padding: 4px;
+  padding-right: 24px;
 }
 .simple-select .link-clear, .simple-select .link-expand {
   display: block;
@@ -76,9 +80,6 @@
   color: #666666;
   border-bottom: 1px solid #dfdfdf;
   cursor: pointer;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 .simple-select .select-list .select-item:first-child {
   -webkit-border-radius: 4px 4px 0 0;

diff --git a/styles/select.scss b/styles/select.scss
@@ -5,7 +5,11 @@
   .select-result {
     width: 100%;
     height: 24px;
+    resize: none;
+    overflow: hidden;
     box-sizing: border-box;
+    padding: 4px;
+    padding-right: 24px;
   }
 
   .link-clear, .link-expand {
@@ -91,9 +95,6 @@
       color: #666666;
       border-bottom: 1px solid #dfdfdf;
       cursor: pointer;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
 
       &:first-child {
         -webkit-border-radius: 4px 4px 0 0;