。
思路一：監聽input框的onkeyup和onkeydown事件
<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">
以上是理應input的size屬性來控制input的寬度的
思路二：propertychange監聽input里面的字符變化,屬性改變事件
<input class="aa" type="text" value id="a" name="ss">來點>我1 <input class="aa" type="text" value id="s" name="ss" />來點/>我2 <input class="aa" type="text" value id="d" name="ss">來點<></>我3</input> <script> $(function(){ //propertychange監聽input里面的字符變化,屬性改變事件 $('.aa').bind('input propertychange', function() { var $this = $(this); console.log($this); var text_length = $this.val().length;//獲取當前文本框的長度 var current_width = parseInt(text_length) *16;//該16是改變前的寬度除以當前字符串的長度,算出每個字符的長度 console.log(current_width) $this.css("width",current_width+"px"); }); }) </script>
思路三：比較靠譜的方法（也存在問題）
//獲取文本寬度 var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'}); $('body').append(sensor); var width = sensor.width(); sensor.remove(); return width; }; //input寬度自適應 $("input").unbind('keydown').bind('keydown', function(){ $(this).width(textWidth($(this).val())); });
以上脫離css單獨用js控制的方法，都有一個嚴重的弊端，那就是忽略了不同字母和數字實際占位寬度不一致。
也就是說，在使用系統默認字體、設置font-size相同的情況下，一個漢字占一個font-size的大小，一個字母占半個font-size的大小，而數字占font-size的大小不知道是啥規律，既不是一個也不是半個font-size，但是在input中實際顯示占的位置卻不一樣
如果是中英文混雜，效果就差強人意（計算的寬度很不准確）。
解決辦法：
要設定好css的字體大小和字體family，我目前發現宋體中字母和數字都遵循寬度和實際占位都是半個font-size，所以暫且使用字體為宋體，但宋體不太好看，其他字體還有待測試
jQuery計算文本寬度的原理是利用html提供的<pre>標簽，向dom中動態添加<pre>標簽，標簽里的內容就是要測試長度的文本，獲取完長度之后再刪除剛才添加的<pre>標簽，從而可取到文本的大概長度了。為什么要用標簽而不用其他標簽呢，那來看看<pre>標簽的特性吧：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符;而文本也會呈現為等寬字體。 <pre>標簽的一個常見應用就是用來表示計算機的源代碼。需要注意的地方是，計算文本長度時文本里面最好不要有其他標簽。以下是實現代碼：可以直接復制引入jq看效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> </head> <style> input{ background:#ddd; border:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; height:22px; padding: 0 10px; text-align: center; font-size:14px; width: 2px; font-family:simsun; } pre{ font-family:simsun;font-size:14px; } </style> <body> <input type="text" value="ffsdfs"> <script> $("input").unbind("input").bind("input",function(){ console.log(1111111); var width=textWidth($(this).val()); $(this).width(width) }) //獲取文本寬度 var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'}); $('body').append(sensor); var width = sensor.width(); sensor.remove(); return width; }; // 初始化時獲取文本寬度 自己加的 $("input").width(textWidth($("input").val())) </script> </body> </html>
根據自己的需求可以靈活運用
。