loader
11 Dec , 2018

input不可编辑,让input文本框不可编辑的几种方法

shape animated shape animated shape animated

使用第三方账号注册

使用手机号/邮箱注册

今天做页面的时候,用到了input,但是属于查询页面,不可以更改页面中的信息,所以input框不可以进行编辑。找了一些资料,总结一下。

今天试了一下使input文本框不可编辑的几种种方法,现在总结一下:

input不可编辑的方法一:最常用的disabled

被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。

<input type="text" disabled="disabled" />

需要注意的是disabled 属性无法与 <input type="hidden"> 一起使用。

input不可编辑的方法二:readonly unselectable='on'

该属性跟disable类似,input 元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。

<input type="text"  readonly  unselectable="on" >

input不可编辑的方法三:直接使用readonly

只读可复制。用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。后台会接收到传值。该属性可以防止用户对值进行修改。

<input type="text" readonly="readonly">

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

input不可编辑的方法三:onfocus=this.blur()

这种是使用js的方式实现,当鼠标放不上就离开焦点

< input type=”text” name=”input1” value=”http://www.panxu.net” onfocus=this.blur()>

好了,上线就是关于“input不可编辑,让input文本框不可编辑的几种方法”的全部内容了。有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如:使< input type=”text” name=”input1” value=”http://www.panxu.net”> 的内容,”http://www.panxu.net”中的网址不可以修改。实现的方式归纳一下总共有上面几种,小伙伴们赶紧去试一下。

Robin Binar Themeix

Onubia, turpis inceptos pharetra. Ipsum erat rutrum, luctus non rhoncus quam quisque posuere, eros pede leo facilisis at risus. Ea sit consectetuer suscipit pede hac purus, erat nec

猜你喜欢

WinSxS是什么,C盘WinSxS是什么文件夹?

11 Dec , 2018

2018-12-11 00:01

mac下安装composer,macos系统下全局安装composer

11 Dec , 2018

2018-12-11 00:11

区块链是什么,区块链到底是什么意思,看完这段话就懂了

11 Dec , 2018

2018-12-11 00:19

wireshark使用教程,网络抓包工具wireshark中文版使用教程

11 Dec , 2018

2018-12-11 00:48

VBS整人代码大集合,学会用VBS来编小程序对心仪的女神表白

11 Dec , 2018

2018-12-11 02:06

网友评论 ( 0 条评论 )

评论