HTML的readonly属性怎么用?

HTML的readonly属性怎么用?,第1张

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

原文地址: HTML的readonly属性怎么用?

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

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

1、<input>和readonly属性

语法:

例:

效果图:

2、<textarea>和readonly属性

语法:

例:

效果图:

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

● Apple Safari 1+

● Google Chrome 1+

● Firefox 1+

● Opera 1+

● Internet Explorer 6+

推荐阅读:

java基础教程

layui框架

go语言教程

//HTML

<input type="tel" id="duplication" >

<div class="btn">

    <button type="button"  class="layui-btn layui-btn-normal" id="duplication2"  onclick="oCopy(this)" readonly="readonly">复制编号

</div>

//JS

function oCopy(obj){

$("#duplication").select()

document.execCommand('copy')

alert("复制成功")

}

1

第一步在我们的电脑上打开软件,新建一个html,并添加上layui的js和css文件,如下图所示:

2

第二步我们打开新建的html文件,在<head>标签里面引入layui.css,layui.js文件,如下图所示:

3

第三步我们开始写body页面内容,这里给的表格内容是layui的表格示例数据,如下图所示:

4

第四步我们最后来给表格数据添加点击事件,table.on('tool(demoEvent)', function(obj){}来监听单元格事件,layer.prompt()d出框,使用 obj.update({ sign: value })进行更新表格和缓存,如下图所示:

5

第五步我们在浏览器中打开html页面,可以看到表格数据内容,如下图所示:

6

第六步我们点击表格数据内容,d出框显示单元格里面的数据,可以看到通过layui,给表格数据添加了点击事件,如下图所示:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7899731.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存