css设置text不可编辑的方法:1、通过“οnfοcus=this.blur()”方法设置text不可编辑;2、使用readonly属性设置输入字段为只读;3、使用disabled属性设置禁用input元素即可。

本教程操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。

推荐:css视频教程

设置text不可编辑的方法

方法1: οnfοcus=this.blur() 当鼠标放不上就离开焦点

方法2:使用readonly属性

通过readonly属性规定输入字段为只读实现不可编辑:

Name:

Country:

效果图:

方法3:使用disabled属性

通过disabled属性规定应该禁用input元素实现不可编辑

说明:

disabled 属性:

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。

readonly 属性:

readonly 属性规定输入字段为只读。

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

readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。

readonly 属性可与 或 配合使用。

css不可修改,css怎么设置text不可编辑相关推荐

  1. html5 按钮css样式修改,css样式制作的漂亮按钮

    复制代码代码如下: Demo: CSS3 Buttons body { background: #ededed; width: 900px; margin: 30px auto; color: #99 ...

  2. css文本外观属性中设置字体,css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  3. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...

  4. CSS 样式修改技巧及心得汇总

    相信你的眼睛,而不是数字!!! 结构要和样式分离!!! 设置网页的字体样式: html, body, div, p, h1, h2, h3, h4, h5, h6, select, input, li ...

  5. CSS(一):CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性;CSS选择器;尺寸和颜色单位、背景和文本设置

    目录 一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...

  6. CSS基础之 背景属性设置

    CSS设置背景,不但包括背景的颜色,还包括背景图片等设置,还是老规矩演示比较靠谱. 背景 背景颜色 背景颜色和文本颜色不同,一个是设置的是文本的颜色,一个是背景的颜色.使用的是backgrou-col ...

  7. javascript修改CSS

    1.js修改单个元素的css属性 document.getElementByIdx('obj').className="-", document.getElementByIdx(' ...

  8. css hot loader,解决安装react-hot-loader后修改css/less文件不会热更新问题

    webpack中启动了模块热替换,也是全网页刷新,不是局部更新! 这两天在研究react-hot-loader如何应用在react的项目中,之前webpack.dev.config.js配置中,设置了 ...

  9. html怎么给变量添加样式,通过CSS变量修改样式

    js怎么去修改css伪类样式呢?但是js并没有伪类选择器,那么该怎么办呢?网上有不少方法,比如通过切换元素的类.在style中动态插入新的样式等. 那么这里再来一种方法,设置css变量(var),通过 ...

最新文章

  1. 在CentOS 6.6 x86_64上安装SystemTap/Perf+FlameGraph玩转火焰图实录
  2. Nature Chemistry | 化学机器学习的最佳实践:推荐的一套标准化指南
  3. SVN安装部署方案(一)
  4. etcd分布式之服务发现需要
  5. python与数学的故事_我与数学的故事作文800字
  6. Julie Desk:这个帮你安排会议的AI助手刚刚融了250万欧元
  7. CG CTF WEB bypass again
  8. c语言多维数组基础知识,C语言基础第7章多维数组.ppt
  9. idea代码补全声明代码_用了这么多年idea,竟然不知道这些代码补全功能
  10. 【深度学习】三维点云数据集总结
  11. php只显示指定文件类型_PHP 上传时的文件类型
  12. AMD将于年内推出高端Polaris图形处理器
  13. 我敢打赌,你对ConcurrentHashMap不了解?
  14. PHP项目性能优化-总览
  15. yum安装ruby_安装 Ruby
  16. 硬件电路|PMOS开关电路
  17. JavaWeb项目部署服务器并配置ssl证书教程
  18. python自动抢单_【Python成长之路】基于sikuli jar包,实现淘宝自动抢单功能(1)...
  19. Python之建模规划篇--线性规划
  20. python电脑推荐_kk视频app下载安装|腾讯视频app下载_电脑知识学习网

热门文章

  1. bzoj 2330 / AcWing 368 银河 差分约束系统+tarjan缩点+拓扑排序
  2. Linux相关命令及软件安装教程
  3. 每日力扣——95. 提莫攻击
  4. c语言水仙花数256,c语言学习:求水仙花数
  5. java如何编写一个qq宠物程序_肿么用java编写一个QQ宠物喂食的程序?
  6. 机器学习工程师 — Udacity 创建客户细分
  7. 【Windows10】此应用无法在你电脑上运行,若要找到适用于你的电脑的版本,请咨询软件发布者
  8. oracle16c,Oracle兵器谱上古神器之-KFED-Oracle
  9. 计算机网络原理 - 概述
  10. 路由方案之ARouter源码分析