Input值不可修改
要固定input标签里面的值不能被修改,我这里有两种方法。
1、 为input标签设置只读模式。
设置只读模式之后,整个文本框就都会被封住,input标签里面的值就不能被手动删除和修改,不能再添加新的内容。有两种方式设置只读模式。
(1) 运用disabled =“disabled”设置。
因为disabled说明了这个input标签是被禁用的、不可选择的,并且不能接收焦点,所以使用了disabled设置只读模式的Input标签,不仅不能再进行编辑,其value值也不会在进行传递。也就是说,使用了disabled设置只读模式的Input标签只能看而不能读取。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190627220352937.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MzkzOA==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190627220558819.PNG)
(2) 运用readonly=“readonly”设置。
使用了readonly设置只读模式的Input标签,虽然不能再进行编辑,但是其value值可以正常读取,readonly不影响input标签的value值和其他程序之间的传递。相对于运用disabled设置只读模式,在这方面运用readonly设置只读模式要方便很多。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190627220507420.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MzkzOA==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190627220456278.PNG)
(3) 当有大量的input标签要设置只读模式时,可以用Js一次性为所有的input标签设置只读模式。(要将Js放到合适的位置,下图只是把书写Js代码的方法和格式列出来)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190627220522313.PNG)
2、 设置value值为默认值。
在input标签里设置固定的value值,通过input标签的Id获取固定的value值;这里使用了onkeyup事件,表示事件在键盘被松开时发生;再用indexOf()方法返回固定的value值并设置value值不能被删除和修改。
这样input标签的value值虽然不能被删除和修改,但是可以在Input标签里继续进行编辑,并且Input并且里的值可以传递。
Html代码:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190627220713454.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MzkzOA==,size_16,color_FFFFFF,t_70)
Js代码:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190627220633181.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MzkzOA==,size_16,color_FFFFFF,t_70)
!