为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery-自动输入文字大小(不是textarea!)

/ 猿问

jQuery-自动输入文字大小(不是textarea!)

拉丁的传说 2019-11-14 15:19:44

如何使用jQuery自动调整输入类型=“文本”字段的大小?我希望它一开始的宽度为100像素,然后在用户输入文字时使其自动变宽……这可能吗?



查看完整描述

3 回答

?
湖上湖

这是一个插件,可以满足您的需求:


插件:


(function($){


$.fn.autoGrowInput = function(o) {


    o = $.extend({

        maxWidth: 1000,

        minWidth: 0,

        comfortZone: 70

    }, o);


    this.filter('input:text').each(function(){


        var minWidth = o.minWidth || $(this).width(),

            val = '',

            input = $(this),

            testSubject = $('<tester/>').css({

                position: 'absolute',

                top: -9999,

                left: -9999,

                width: 'auto',

                fontSize: input.css('fontSize'),

                fontFamily: input.css('fontFamily'),

                fontWeight: input.css('fontWeight'),

                letterSpacing: input.css('letterSpacing'),

                whiteSpace: 'nowrap'

            }),

            check = function() {


                if (val === (val = input.val())) {return;}


                // Enter new content into testSubject

                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');

                testSubject.html(escaped);


                // Calculate new width + whether to change

                var testerWidth = testSubject.width(),

                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,

                    currentWidth = input.width(),

                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)

                                         || (newWidth > minWidth && newWidth < o.maxWidth);


                // Animate width

                if (isValidWidthChange) {

                    input.width(newWidth);

                }


            };


        testSubject.insertAfter(input);


        $(this).bind('keyup keydown blur update', check);


    });


    return this;


};


})(jQuery);


查看完整回答
反对 回复 2019-11-14
?
莫回无

我认为没有完美的解决方案,因为您无法检测输入到输入元素的文本的实际宽度。这完全取决于您使用的字体,浏览器中的缩放设置等。


但是,如果可以选择一种字体,在其中可以实际计算文本的像素数(这是最难的部分,但我想您可以尝试以某种方式进行估算)。您可以使用它来更改输入字段的宽度。


 $('input').keyup(function () {

     // I'm assuming that 1 letter will expand the input by 10 pixels

     var oneLetterWidth = 10;


     // I'm also assuming that input will resize when at least five characters

     // are typed

     var minCharacters = 5;

     var len = $(this).val().length;

     if (len > minCharacters) {

         // increase width

         $(this).width(len * oneLetterWidth);

     } else {

         // restore minimal width;

         $(this).width(50);

     }

 });


查看完整回答
反对 回复 2019-11-14
?
MM们

您好,我不知道您是否还在寻找,但是当我正在寻找一个脚本来做同样的事情时,我遇到了这个问题。因此,希望这对尝试这样做的人有所帮助。


function editing_key_press(e){

    if(!e.which)editing_restore(this.parentNode);

    var text = $('<span>')

        .text($(this).val())

        .appendTo(this.parentNode);

    var w = text.innerWidth();

    text.remove();

    $(this).width(w+10);

}

此代码的逻辑是将内容跨度放在页面上,然后获取此内容的宽度并将其删除。我确实遇到的问题是我必须让它同时在keydown和keyup上运行才能成功工作。


希望这会有所帮助,可能不会,因为我只是在短时间内进行jquery。


查看完整回答
反对 回复 2019-11-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信