用淘汰賽調整我的輸入文本框

Question

我在我的頁面上有一個輸入文本框，我需要將此輸入框的寬度調整爲他的內容。例如：如果裏面只有2個字符，那麼我的輸入框應該小於如果我有10個字符的輸入框。

我能用jQuery做到這一點，但是這次我真的好奇我自己是否可以用knockout來完成這項工作？

這裏是一個的jsfiddle爲出發點：http://jsfiddle.net/LkqTU/13554/

正如你可以在此看到的jsfiddle，內容「ABC」輸入文本框實在是太多了更大的...當你點擊按鈕，那麼輸入文本框太小了。

所以我需要的是一個「機制」，根據他的內容自動調整框。

<input type="text" data-bind="value: myField"> 

<input type="button" value="Click me" data-bind="click: buttonClicked"> 

var ViewModel = function() { 

    this.myField = ko.observable('abc'); 

    this.buttonClicked = function() { 
     this.myField('azertyuiolkjhgfdsseryuujnbvcxsssx'); 
    } 

}; 

ko.applyBindings(new ViewModel()); 

謝謝。

Answer 1

基於this answer我做了一個簡單的自定義綁定，您可以如下使用：

默認選項：

<input type="text" data-bind="value: myField, autoGrowInput: true"> 

使用自定義設置

<input type="text" data-bind="value: myField, 
autoGrowInput: {comfortZone :10, maxWidth:500, minWidth : 100}"> 

自定義綁定：

ko.bindingHandlers.autoGrowInput = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     var valueUnwrapped = ko.unwrap(value); 
     if(valueUnwrapped === true) { 
     // use default options 
      $(element).autoGrowInput(); 
     } 
     else if(valueUnwrapped === false) { 
      // does nothing 
      return; 
     } 
     else { 
      // use custom options 
      $(element).autoGrowInput(valueUnwrapped); 
     } 
     // looking for the value binding 
     var ab = allBindings(); 
     if (ab['value']) { 
      ab.value.subscribe(function() { 
      $(element).trigger('update'); 
      }); 
     } 

    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 

    } 
}; 

See demo