【html】input标签value属性值的字符长度多了1的诡异bug

前言：前端的世界总能遇到很诡异的事情。对，一不下心就能遇到。。。。

一、诡异bug重现

<body>
<input type="text" value="‬" >
<button>测试1</button>
<script>
var aInp = document.getElementsByTagName('input');
var aBtn = document.getElementsByTagName('button');
aBtn[0].onclick = function(){
	var str = aInp[0].value;
	console.log(str);
	console.log('字符长度',str.length);
	console.log('清除空格',str.trim().length);
};
</script>
</body>

①、不输入任何内容，点击测试按钮

！！input标签的value值的长度竟然是1，起初我以为是空格的问题，然后用js清除空格，value的长度还是1。

②、输入一个数字1，然后点击测试按钮。

这时候发现input标签的value值的长度是2了，并不是我们想象中的1。

③、输入一个英文a，然后点击测试按钮。

这时候发现input标签的value值的长度还是2，并不是1。

在chrome浏览器下查看了标签，value属性那里发现多了一个诡异的符号。

④、在未输入任何东西前，敲击键盘上的删除键，可以消除这东西。

在未敲击删除键之前显示的是1，敲击删除键之后就正常了。

⑤、给input一个默认的value值，然后输出value长度值。

<body>
<input type="text" value="‬123" >
<button>测试1</button>
<script>
var aInp = document.getElementsByTagName('input');
var aBtn = document.getElementsByTagName('button');
aBtn[0].onclick = function(){
	var str = aInp[0].value;
	console.log(str);
	console.log('字符长度',str.length);
	console.log('清除空格',str.trim().length);
};
</script>
</body>

输出结果

发现这诡异的东西仍然存在。而且这东西不单只在chrome浏览器上有，在火狐浏览器上也会出现这种情况。

二、解决方案

①、不要给input的标签添加默认的value=""属性

<body>
<input type="text" value="‬" >
<button>测试1</button>
<br />
<input type="text" >
<button>测试2</button>

<script>
var aInp = document.getElementsByTagName('input');
var aBtn = document.getElementsByTagName('button');
aBtn[0].onclick = function(){
	var str = aInp[0].value;
	console.log(str);
	console.log('字符长度',str.length);
	console.log('清除空格',str.trim().length);
};
aBtn[1].onclick = function(){
	var str = aInp[1].value;
	console.log(str);
	console.log('字符长度',str.length);
	console.log('清除空格',str.trim().length);
};
</script>
</body>

不输入任何内容，分别敲击这两个按钮

这时候第二个input标签就没诡异的bug了。

②、给input的标签添加默认的value=''时，用单引号，不要用双引号属性

<body>
<input type="text" value="‬" >
<button>测试1</button>
<br />
<input type="text" value="123‬" >
<button>测试2</button>
<br />
<input type="text" value='' >
<button>测试3</button>
<br />
<input type="text" value='123' >
<button>测试4</button>
<script>
var aInp = document.getElementsByTagName('input');
var aBtn = document.getElementsByTagName('button');
for(var i = 0,len=aInp.length; i<len; i++){
	aBtn[i].index = i;
	aBtn[i].onclick = function(){
		var str = aInp[this.index].value;
		console.log(str)
		console.log('字符长度',str.length);
	};	
}
</script>
</body>

分别点击四个按钮。

这时候发现这诡异的字符就不存在''中了。

三、诡异字符猜想

<body>
<input type="text" value="‬" name="" data-id="">
<button>测试1</button>
</body>

给input标签添加一个name属性，值为空字符串，添加一个自定义属性，值也是为空字符串

①在chrome浏览器中打开

②在火狐浏览器中打开

字符&#8236字符是用于占位的？

四、建议

大家在给input的value属性添加默认值的时候，并且要获取value值的字符长度的时候要注意这个问题啦。

【html】input标签value属性值的字符长度多了1的诡异bug

猜你喜欢