当调用 .change() 函数时，我试图为某些东西的宽度设置动画，但它似乎不起作用。
知道为什么吗？
这是我的代码：
$(document).ready(function(){
$('#code').change(function(){
//on change animate a width of +16px increase.
$(this).animate({width: '+=16'});
});
});
这是一个重新创建问题的 js fiddle：http: //jsfiddle.net/BUSSX/
如果基于您之前的问题HTML 标记：
<button class="I button">I</button>
<button class="O button">O</button>
<input id="code" type="text" disabled />
因此，如果要为文本框的宽度设置动画，则需要在单击按钮时对其进行动画处理：
$('.button').click(function(event) {
var text = $(this).text();
$('input:text').val(function(index, val) {
return val + text;
});
$('#code').animate({width: '+=16'});
});
如果基于您的上述问题 HTML 标记，您需要使用keyup而不是在以下位置change包含 jQuery 库jsFiddle：
$(document).ready(function(){
$('#code').keyup(function(){
//on change animate a width of +16px increase.
$(this).animate({width: '+=16'});
});
});
您只需要检查按下了哪个键：
$(document).ready(function(){
$('#code').keyup(function(e){
//on change animate a width of +16px increase.
if(e.keyCode == 8) { // Backspace pressed
$(this).animate({width: '-=16'});
} else {
$(this).animate({width: '+=16'});
}
});
});
如果您真的想要输入控件的更改事件，那么这是我不久前编写的一个 jQuery 插件方法，它可以用于几乎所有可以更改输入控件内容的方式，包括拖放、复制/paste，打字等...如果存在的话，它会利用更新的事件来帮助解决这个问题，否则它会退回到侦听许多其他事件并查看数据是否已更改。
(function($) {
var isIE = false;
// conditional compilation which tells us if this is IE
/*@cc_on
isIE = true;
@*/
// Events to monitor if 'input' event is not supported
// The boolean value is whether we have to
// re-check after the event with a setTimeout()
var events = [
"keyup", false,
"blur", false,
"focus", false,
"drop", true,
"change", false,
"input", false,
"textInput", false,
"paste", true,
"cut", true,
"copy", true,
"contextmenu", true
];
// Test if the input event is supported
// It's too buggy in IE so we never rely on it in IE
if (!isIE) {
var el = document.createElement("input");
var gotInput = ("oninput" in el);
if (!gotInput) {
el.setAttribute("oninput", 'return;');
gotInput = typeof el["oninput"] == 'function';
}
el = null;
// if 'input' event is supported, then use a smaller
// set of events
if (gotInput) {
events = [
"input", false,
"textInput", false
];
}
}
$.fn.userChange = function(fn, data) {
function checkNotify(e, delay) {
var self = this;
var this$ = $(this);
if (this.value !== this$.data("priorValue")) {
this$.data("priorValue", this.value);
fn.call(this, e, data);
} else if (delay) {
// The actual data change happens aftersome events
// so we queue a check for after
// We need a copy of e for setTimeout() because the real e
// may be overwritten before the setTimeout() fires
var eCopy = $.extend({}, e);
setTimeout(function() {checkNotify.call(self, eCopy, false)}, 1);
}
}
// hook up event handlers for each item in this jQuery object
// and remember initial value
this.each(function() {
var this$ = $(this).data("priorValue", this.value);
for (var i = 0; i < events.length; i+=2) {
(function(i) {
this$.on(events[i], function(e) {
checkNotify.call(this, e, events[i+1]);
});
})(i);
}
});
}
})(jQuery);
然后，您的代码将如下所示：
$(document).ready(function(){
$('#code').userChange(function(){
//on change animate a width of +16px increase.
$(this).animate({width: '+=16'});
});
});
在查看您的代码时，您将输入控件的宽度在每次更改时增加 16 像素。您可能应该查看控件中的字符数并基于此评估宽度的处理方法，因为如果用户按下退格键，这将使事情变得更广泛。我可能会做这样的事情，在添加内容时增加项目，但不会缩小它：
$(document).ready(function(){
$('#code').userChange(function(){
// on change animate width as chars are added
// only grow it when the width needs to be larger than it is currently
var item = $(this);
var origWidth = item.data("initialWidth");
var curWidth = item.width();
if (!origWidth) {
origWidth = curWidth;
item.data("initialWidth", origWidth);
}
var newWidth = origWidth + (8 * item.val().length);
if (newWidth > curWidth) {
item.stop(true, true).animate({width: newWidth}, 500);
}
});
});
工作代码示例：http: //jsfiddle.net/jfriend00/BEDcR/
如果您希望 userChange 方法在您以编程方式设置值时执行.val()，那么您可以为此创建自己的方法：
$(document).ready(function(){
function updateWidth() {
// on change animate width as chars are added
// only grow it when the width needs to be larger than it is currently
var item = $(this);
var origWidth = item.data("initialWidth");
var curWidth = item.width();
if (!origWidth) {
origWidth = curWidth;
item.data("initialWidth", origWidth);
}
var newWidth = origWidth + (8 * item.val().length);
if (newWidth > curWidth) {
item.stop(true, true).animate({width: newWidth}, 500);
}
}
$('#code').userChange(updateWidth);
$.fn.valNotify = function(value) {
this.val(value);
this.each(function() {
updateWidth.call(this);
});
return this;
}
});
然后，您可以使用它更改您的值，它也会自动调整大小：
$("#code").valNotify("foo");
你忘了加载 jQuery，在这里工作正常http://jsfiddle.net/BUSSX/13/ - 你也需要这个click事件。或者甚至更好地使用该keyup事件，以便一旦输入内容，文本框的宽度就会增加 - http://jsfiddle.net/BUSSX/15/
IrfanM，而不是增加一个固定的数量，你可以考虑增加一个合适的数量，以适应输入的每个字符。
除非我把事情复杂化了（不是完全未知），否则这有点棘手。
在以下 jQuery 插件中：
<span>的，其字体系列和字体大小与其各自的输入元素相同。<span>每次输入字符时，这些元素通过接受其输入字段的整个文本的副本来充当“测量棒”。<span>字符宽度的宽度来确定输入字段的宽度。这是代码：
(function ($) {
var pluginName = 'expandable';
$.fn[pluginName] = function () {
return this.each(function (i, input) {
var $input = $(input);
if (!$input.filter("input[type='text']").length) return true;
// Common css directives affecting text width
// May not be 100% comprehensive
var css = {
fontFamily: $input.css('fontFamily'),
fontSize: $input.css('fontSize'),
fontStyle: $input.css('fontStyle'),
fontVariant: $input.css('fontVariant'),
fontWeight: $input.css('fontWeight'),
fontSizeAdjust: $input.css('fontSizeAdjust'),
fontStretch: $input.css('fontStretch'),
letterSpacing: $input.css('letterSpacing'),
textTransform: $input.css('textTransform'),
textWrap: 'none'
};
var $m = $("<span/>").text('M').insertAfter($input).css(css).text('M').hide();
var data = {
'm': $m,
'w': $m.width()
};
$input.data(pluginName, data).keyup(function (e) {
$this = $(this);
var data = $this.data(pluginName);
var w = data.m.html($this.val().replace(/\s/g, " ")).width();
$this.css({
'width': w + data.w
});
}).trigger('keyup');
});
};
})(jQuery);
$(document).ready(function () {
$('input').expandable();
});
这是有效的，因为<span>元素会自动扩展以适应其文本，而<input type="text">元素不会。这种方法的一个重要特点是不需要测试击键 - 该插件会自动响应字符删除，就像它响应字符笔划一样。
它适用于比例和等宽字体，甚至可以适当地响应剪切和粘贴。
唯一必要的预防措施是将空格转换为不间断空格，否则 HTML 会将多个空格呈现为元素$nbsp;中的单个空格。<span>
当然，如果您真的希望每次击键都精确地增长 16 像素，那么请坚持您已经拥有的。
你有一个糟糕的实施检查http://jsfiddle.net/3dSZx/你需要添加 jquery 到小提琴
JS$(document).ready(function(){
$('#push').click(function(){
//on change animate a width of +16px increase.
$('#code').animate({ width: '+=16'});
});
});