项目中想做个input随着打字,input的宽随着字数变化而长度变化
看了有人说用onkeydown,onkeyup配合使用
<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">
还有这么说的
<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中实际显示占的位置却不一样
比如font-size为12px,我打三个汉字
宽度为36px;
我再打三个字母
因为字母宽度为半个font-size,所以宽度为18px,但是明显看出两边出现空白,字母多了看的更明显
所以上述方法打中文没啥问题,一旦出现中英文数字混打就出现问题
解决办法:
要设定好css的字体大小和字体family,我目前发现宋体中字母和数字都遵循宽度和实际占位都是半个font-size,所以暂且使用字体为宋体,但宋体不太好看,其他字体还有待测试
此方法参考博文https://www.cnblogs.com/mymelody/p/5674261.html
jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pre>标签,从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢,那来看看<pre>标签的特性吧:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是,计算文本长度时文本里面最好不要有其他标签。以下是实现代码:可以直接复制引入jq看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
}
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>
</head>
<body>
<input type="text" >
<script type="text/javascript">
$("input").unbind("input").bind("input",function(){
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;
};
</script>
</body>
</html>
pre和input的font-size和font-family要设置相同,font-family使用宋体
这样看起来就没有任何问题了,唯一缺点是宋体不好看,美观问题还有待研究