-1

当调用 .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/

4

5 回答 5

1

如果基于您之前的问题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'});
});

Working Demo


如果基于您的上述问题 HTML 标记,您需要使用keyup而不是在以下位置change包含 jQuery 库jsFiddle

$(document).ready(function(){
    $('#code').keyup(function(){
        //on change animate a width of +16px increase.
        $(this).animate({width: '+=16'});
    });
}); 

Updated Demo


您只需要检查按下了哪个键:

$(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'});
        }
    });
});

Updated Demo

于 2013-04-13T03:28:38.023 回答
1

如果您真的想要输入控件的更改事件,那么这是我不久前编写的一个 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");
于 2013-04-13T03:43:16.210 回答
0

你忘了加载 jQuery,在这里工作正常http://jsfiddle.net/BUSSX/13/ - 你也需要这个click事件。或者甚至更好地使用该keyup事件,以便一旦输入内容,文本框的宽度就会增加 - http://jsfiddle.net/BUSSX/15/

于 2013-04-13T03:33:26.543 回答
0

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, "&nbsp;")).width();
                $this.css({
                    'width': w + data.w
                });
            }).trigger('keyup');
        });
    };
})(jQuery);

$(document).ready(function () {
    $('input').expandable();
});

演示

这是有效的,因为<span>元素会自动扩展以适应其文本,而<input type="text">元素不会。这种方法的一个重要特点是不需要测试击键 - 该插件会自动响应字符删除,就像它响应字符笔划一样。

它适用于比例和等宽字体,甚至可以适当地响应剪切和粘贴。

唯一必要的预防措施是将空格转换为不间断空格,否则 HTML 会将多个空格呈现为元素$nbsp;中的单个空格。<span>

当然,如果您真的希望每次击键都精确地增长 16 像素,那么请坚持您已经拥有的。

于 2013-04-13T07:06:56.700 回答
0

你有一个糟糕的实施检查http://jsfiddle.net/3dSZx/你需要添加 jquery 到小提琴

JS

$(document).ready(function(){
    $('#push').click(function(){
        //on change animate a width of +16px increase.
        $('#code').animate({ width: '+=16'});
    });    
});
于 2013-04-13T07:11:42.187 回答