景安微信
网站有问题
老雷来帮忙
景安网络 欢迎来到景安网络虚拟主机资讯站!
免费主机国内主机
国内主机
0元购买
原价99元/年 我想领取
QQ群
快云体验交流群

群名称:快云体验群

群   号:288544772

一键加群 快云体验交流群
公众号
快云官方微信

扫码关注公众号您可以:

1、微信一键登录会员;

2、微信提交故障工单;

3、微信查询网站备案。

回顶部
1元vps

首页 > 网络教程 > html文本框input不可编辑,禁止用户修改的实现方法

html文本框input不可编辑,禁止用户修改的实现方法

来源:景安网络

作者:明辰

更新时间:2018-12-28 15:47

景安网络—专业的数据中心服务商!提供快云服务器,快云VPS,虚拟主机,域名注册,服务器托管,服务器租用,SSL证书,数据库存储。 10M独享主机,一元拼单! 立即注册

    最近自己一直在学习html+css,这2天刚学到html中的input标签。老师给我们布置了课下作业,要求:input表单中的文本框是只读的,用户不能编辑文本框中的信息。
 
    实现上面的要求很简单,大概有以下几种方法可以实现input不可编辑,我把各种方式实现的代码也给大家奉上。
 
    方法1: onfocus=this.blur()
 
    <input type="text" name="input1" value="景安" onfocus=this.blur()>
 
    浏览器运行效果:

    input不可编辑
 
    方法2:readonly
 
    <input type="text" name="input1" value="景安" readonly>
 
    <input type="text" name="input1" value="景安" readonly="true">
 
 
    方法3: disabled
 
    <input type="text" name="input1" value="景安" disabled="true">

    浏览器运行效果:

    input不可编辑
 
    给大家举个完整的例子:
 
    <input name="ja_na" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="5567689" disabled="true" readOnly="true" />
 
    说明:

    disabled="true" 此时文字会变成灰色,不可编辑。
 
    readOnly="true" 文字不会变色,也是不可编辑的



本文链接:http://host.zzidc.com/wljc/1270.html

关键字:input不可编辑

若无特别注明,文章皆为景安网络原创,转载请注明出处。

10元主机