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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w390058785/article/details/80692930

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

一、诡异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值的字符长度的时候要注意这个问题啦。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页