css不可修改,css怎么设置text不可编辑
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不可编辑相关推荐
- html5 按钮css样式修改,css样式制作的漂亮按钮
复制代码代码如下: Demo: CSS3 Buttons body { background: #ededed; width: 900px; margin: 30px auto; color: #99 ...
- css文本外观属性中设置字体,css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
- CSS 样式修改技巧及心得汇总
相信你的眼睛,而不是数字!!! 结构要和样式分离!!! 设置网页的字体样式: html, body, div, p, h1, h2, h3, h4, h5, h6, select, input, li ...
- 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 ...
- CSS基础之 背景属性设置
CSS设置背景,不但包括背景的颜色,还包括背景图片等设置,还是老规矩演示比较靠谱. 背景 背景颜色 背景颜色和文本颜色不同,一个是设置的是文本的颜色,一个是背景的颜色.使用的是backgrou-col ...
- javascript修改CSS
1.js修改单个元素的css属性 document.getElementByIdx('obj').className="-", document.getElementByIdx(' ...
- css hot loader,解决安装react-hot-loader后修改css/less文件不会热更新问题
webpack中启动了模块热替换,也是全网页刷新,不是局部更新! 这两天在研究react-hot-loader如何应用在react的项目中,之前webpack.dev.config.js配置中,设置了 ...
- html怎么给变量添加样式,通过CSS变量修改样式
js怎么去修改css伪类样式呢?但是js并没有伪类选择器,那么该怎么办呢?网上有不少方法,比如通过切换元素的类.在style中动态插入新的样式等. 那么这里再来一种方法,设置css变量(var),通过 ...
最新文章
- 在CentOS 6.6 x86_64上安装SystemTap/Perf+FlameGraph玩转火焰图实录
- Nature Chemistry | 化学机器学习的最佳实践:推荐的一套标准化指南
- SVN安装部署方案(一)
- etcd分布式之服务发现需要
- python与数学的故事_我与数学的故事作文800字
- Julie Desk:这个帮你安排会议的AI助手刚刚融了250万欧元
- CG CTF WEB bypass again
- c语言多维数组基础知识,C语言基础第7章多维数组.ppt
- idea代码补全声明代码_用了这么多年idea,竟然不知道这些代码补全功能
- 【深度学习】三维点云数据集总结
- php只显示指定文件类型_PHP 上传时的文件类型
- AMD将于年内推出高端Polaris图形处理器
- 我敢打赌,你对ConcurrentHashMap不了解?
- PHP项目性能优化-总览
- yum安装ruby_安装 Ruby
- 硬件电路|PMOS开关电路
- JavaWeb项目部署服务器并配置ssl证书教程
- python自动抢单_【Python成长之路】基于sikuli jar包,实现淘宝自动抢单功能(1)...
- Python之建模规划篇--线性规划
- python电脑推荐_kk视频app下载安装|腾讯视频app下载_电脑知识学习网
热门文章
- bzoj 2330 / AcWing 368 银河 差分约束系统+tarjan缩点+拓扑排序
- Linux相关命令及软件安装教程
- 每日力扣——95. 提莫攻击
- c语言水仙花数256,c语言学习:求水仙花数
- java如何编写一个qq宠物程序_肿么用java编写一个QQ宠物喂食的程序?
- 机器学习工程师 — Udacity 创建客户细分
- 【Windows10】此应用无法在你电脑上运行,若要找到适用于你的电脑的版本,请咨询软件发布者
- oracle16c,Oracle兵器谱上古神器之-KFED-Oracle
- 计算机网络原理 - 概述
- 路由方案之ARouter源码分析