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

最新推荐文章于 2024-08-03 10:06:27 发布

汪小穆

最新推荐文章于 2024-08-03 10:06:27 发布

阅读量3.3k

点赞数 3

分类专栏： html 文章标签： input标签 &amp;#8236 input标签诡异字符 input的value值长度多1

本文链接：https://blog.csdn.net/w390058785/article/details/80692930

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

汪小穆

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【html】input标签value属性值的字符长度多了1的诡异bug

前言：前端的世界总能遇到很诡异的事情。对，一不下心就能遇到。。。。一、诡异bug重现&lt;body&gt;&lt;input type="text" value="‬" &gt;&lt;button&gt;测试1&lt;/button&gt;&lt;script&gt;var aInp = document.getElementsByTagName('input');var a
复制链接

扫一扫

专栏目录