如何让input宽度自适应?

Posted 2023-04-11

很多时候文本框输入的内容是不固定的，有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些，所以需要设置input的宽度自适应。

工具原料：编辑器、jQuery

1、解决宽度自适应的思路是使用jQuery来监听输入事件，进而进行动态的改变input的宽度，实现input宽度自适应的效果。

2、首选获取文本的宽度，利用pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体，简单的代码示例如下：

    var textWidth = function(text) 
        var sensor = $(\'<pre>\'+ text +\'</pre>\').css(display: \'none\'); 
        $(\'body\').append(sensor); 
        var width = sensor.width();
        sensor.remove(); 
        return width;
    ;

3、根据以上获取到的文字的宽度来给input绑定事件动态改变宽度，简单的代码示例如下：

  $("input").unbind(\'keydown\').bind(\'keydown\', function()
        $(this).width(textWidth($(this).val()));
    ); 参考技术A input高度固定，自动增宽<br>
<input type="text" style="width:60;overflow-x:visible;overflow-y:visible;">
<br>
<br>
textarea宽度固定，自动增高<br>
<textarea type="text" style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>本回答被提问者和网友采纳

如何让iframe里面的内容宽度自适应

参考技术A 代码如下:

<mce:script language= "Javascript "><!--

window.onload=function()

parent.document.all("iframe1").style.height = document.body.scrollHeight;
parent.document.all("iframe1").style本回答被提问者采纳