禁止 input 元素输入内容可以给其添加 disabled 和 readonly 属性,虽然这两个属性都可以禁止 input 的输入,但也是有一些差别的!

disabled 属性禁止 input 输入

input 元素添加 disabled 属性,可以使用 input 输入框变灰,并且不可把选中以及复制,在form提交时也不会提交其input的 value 值。

代码:

<input type="text" name="" value="飞鸟慕鱼博客">
<input type="text" disabled="disabled" value="飞鸟慕鱼博客">

运行图:

禁止 input 元素输入内容的方法

readonly 属性设置 input 为只读

input 元素添加 readonly 属性,可以禁止 input 的输入变为只可阅读的状态,其它的地方与正常的 input 功能没有区别,可以被选中,复制等。

代码:

<input type="text" name="" value="飞鸟慕鱼博客">
<input type="text" disabled="readonly" value="飞鸟慕鱼博客">

运行图:

禁止 input 元素输入内容的方法

readonly 与 disabled 属性的区别

1、disabled 可以使用 input 变灰,但 readonly 不会

2、disabled 可以使用input的内容不被复制和选中,但 readonly 不会

3、disabled 在form提前或JS获取内容时,是获取不到的,但 readonly 可以