资讯专栏INFORMATION COLUMN

HTML中设置input等文本框为不可操作

wall2flower / 3568人阅读

摘要:在特定场景下,我们可能不允许用户操作或者更改表单项那么具体如何操作呢在中,我们大概有两种方法可以实现,或者说两个属性分别为它们的区别在于设置后,区域为灰色,不可手动操作设置后,除了不可手动操作后,其余和普通无异详情请参考如下代码和演示

在特定场景下,我们可能不允许用户操作或者更改表单项

那么具体如何操作呢?

在html中,我们大概有两种方法可以实现,或者说两个属性

分别为:

disabled=“disabled”
readonly=“true"
它们的区别在于
disabled:设置后,input区域为灰色,不可手动操作
readonly:设置后,除了不可手动操作后,其余和普通input无异

详情请参考如下代码和演示

  
  
  
      
    demo  
  
  
      
    

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50108.html

相关文章

  • 第二天

    摘要:学习用时小时学习目标第二天任务目标是否已达成麻麻嘚。摘录一个笔记第二天笔记以下是原文爱上前端,用技术带给用户最优美的体验。为文本框命名,以备后台程序使用。 codepen好像崩了?-_-|| 2019.3.6 怎么也要至少过一遍鸭。学习用时:3小时学习目标:第二天任务目标是否已达成:麻麻嘚。 今天学了什么? 勉强再认了一次各种标签(虽然感觉还是认不住),ol,ul,li和dl,dt,d...

    warkiz 评论0 收藏0
  • AngularJS中ng-class的用法

    摘要:从今天开始写博,记录下自己技术发展的点滴吧。相比另外两种,类型的表达式就有优势。缺点是多了,写起来挺麻烦的第三种,表达式为这里中的每个元素都绑定了一个的输入值,实际上每个元素都使用了类型的值中元素可以为或者,中对的规则同上。 从今天开始写博,记录下自己技术发展的点滴吧。 一、什么是ng-class ng-class是AngularJS预设的一个指令(directive),通过这个指令能...

    张金宝 评论0 收藏0
  • html标签简介(常用)

    摘要:比如等行内标签可以多个标签共同占用一行的标签。标准模式,浏览器使用的标准解析渲染页面。显示结果这个文本包含下标文本。表单提交项的值。表单还可以包含和标签。html常识 什么是HTML htyper text markup language  即超文本标记语言 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 标记语言: 标记(标签)构成的语言. 网页==HTML文...

    Travis 评论0 收藏0
  • placeholder的兼容处理

    摘要:方法一效果预览思路是,首先判断浏览器是否支持属性,如果不支持的话,就遍历所有输入框,获取属性的值填充进输入框作为提示信息,同时字体设置成灰色。 placeholder是HTML5的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m)、Firefox( v21.0 )、360安全( v6.3 极速模式 )...

    beita 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<