用敲除调整输入文本框
用敲除调整输入文本框
提问于 2013-12-19 13:49:10
我的页面上有一个输入文本框，我需要根据他的内容调整这个输入框的宽度。因此，例如:如果其中只有2个字符，那么我的输入框应该比我有10个字符的情况下小。
我可以用jQuery来做这件事，但这一次我真的想知道自己是否可以用淘汰赛来完成这件事？
下面是一个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());谢谢。
Stack Overflow用户
回答已采纳
发布于 2013-12-19 14:13:31
基于这个答案，我做了一个简单的自定义绑定，您可以如下所示：
默认选项：
<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) {
}
};见演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20683424
复制相关文章
相似问题
腾讯云开发者
