HTML的readonly属性怎么用？

readonly属性是一个布尔属性，可用于指定在input或textarea元素中写入的文本是只读的。这意味着用户不能修改或更改特定元素中已经存在的内容（但是，用户可以对其进行制表、突出显示和复制文本）。而JavaScript可以用来更改只读值并使输入字段可编辑。

readonly 属性指定输入字段为只读，只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly属性可与下面列出的两个元素一起使用：

1、和readonly属性

语法：

<input readonly>

例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>readonly属性</title><style>body {text-align: center}h1,h2 {color: green;font-style: italic;}</style></head><body><h1>input元素中的readonly属性</h1><form action="">Email: <input type="text" name="email"><br> Country: <input type="text" name="country" value="China" readonly><br><br> <input type="submit" value="Submit"></form></body></html>

效果图：

2、和readonly属性

语法：

<textarea readonly>

例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>readonly属性</title><style> body { text-align:center; } h1, h2 { color:green; font-style:italic; } </style> </head> <body> <h1>textarea元素中的readonly属性</h1> <textarea rows="4" cols="40" readonly>不可编辑！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！</textarea><textarea rows="4" cols="40">可编辑！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！</textarea> </body>
</html>

效果图：

readonly属性支持的浏览器如下：

●　Apple Safari 1+

●　Google Chrome 1+

●　Firefox 1+

●　Opera 1+

●　Internet Explorer 6+
推荐阅读：

php服务器

php5下载

layui框架

HTML的readonly属性怎么用？相关推荐

Selenium2+python自动化25-js处理日历控件（修改readonly属性）
前言日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...
input的readonly属性与TextBox的ReadOnly和Enabled属性区别
input的readonly属性:可以通过js修改input的value,然后提交到服务器端,可获得修改后的值. TextBox的ReadOnly属性:通过js修改Text值,提交到服务器,服务器商无 ...
selenium3 + python - js处理readonly属性
前言日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...
html js修改readonly,js控制html元素的readonly属性
html元素假设为只读,那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入. 初始时,两个输入框都是只读.点击change按钮后, ...
如何用jquery动态改变 input 输入框的readonly属性及CSS样式
样例 <style type="text/css">.disable{background-color: #d2d2d2;} </style><div ...
关于datagridview中列的readonly属性
1.如何实现datagridview中的某一列能够单独编辑其余列不能编辑必须先将datagridview属性中的readonly属性设置为false,然后再将不需要编辑的列的readonly属性设置 ...
python+selenium：移除时间控件readonly属性，实现send_keys输入
参考博客: python+selenium:web端关闭时间控件readonly属性,可直接输入[今天][昨天][任意]时间类似这样的时间戳控件: 可以看到控件有:readonly 属性[只读] 一 ...
Python+selenium自动化-js处理日历控件（修改readonly属性）
前言今天写自动化脚本的时候遇到一个需要更改日期的控件,不想费劲巴拉的去找日历的定位,但是又没办法直接输入我想输的日期时间,想了会儿之后决定用js解决日历控件基本思路:先用js去掉readonly属 ...
修改readonly属性的值
一般情况下,readonly属性的值是无法修改的,但可以通过特殊方式修改. 定义一个student的类,其中name属性为readonly类型的变量 @interface JFStudent : NS ...
pythongui日历控件_Selenium2+python自动化25-js处理日历控件（修改readonly属性）
前言日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...

HTML的readonly属性怎么用？

HTML的readonly属性怎么用？相关推荐

最新文章

热门文章