input输入框为只读灰色

最新推荐文章于 2024-05-30 14:33:11 发布
最新推荐文章于 2024-05-30 14:33:11 发布
阅读量1.1w 收藏
点赞数
分类专栏： 学习笔记 文章标签： input function class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alinaxz/article/details/6635723
版权
通过CSS实现input输入框的只读效果，并设置背景颜色。当input为只读时，背景变为灰色；取消只读时，背景变为白色。提供两种JavaScript方法动态改变input的样式：一种是直接修改className，另一种是通过遍历style对象设置属性。
摘要由CSDN通过智能技术生成
<STYLE>

  .inputReadOnly{readonly:expression(this.readOnly=true);background-color:expression((this.readOnly && this.readOnly==true)?"#BEBEBE":"") }

 .inputNotReadOnly { readonly: expression(this . readOnly = false);    background-color: expression(( this . readOnly &&   this . readOnly == false)  ? "#FFFFFF" : "" )
}

</STYLE>



<input type="text" name="f_EfullName" id="f_EfullName"
                                                size="18" maxlength="30" class="inputReadOnly"/>



动态改变样式

第一种

document.getElementById("f_empNum").className="inputNotReadOnly";

第二种

var

最低0.47元/天 解锁文章
Alinaxz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 将整个表单设置为只读_elementUI 设置input的只读或禁用的方法
weixin_39531178的博客
12-19 1万+
只读：readonly在data里定义：readonly: true,然后在input框里加上readonly就可以了。禁用：disabled在data里定义：edit: true,然后在input框里加上：:disabled="edit"就可以了PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性通过 disabl...
js控制input框只读实现示例
10-26
同时，为了视觉上更明显地区分只读状态，还设置了背景色为灰色（`#d2d2d2`）。 ```javascript function isreadonly() { var obj = document.getElementById("username"); obj.setAttribute("readOnly", true); ...
vue中的el-input设置灰显不可编辑
dxjren的博客
11-17 8112
el-input设置灰显不可编辑，以及报：invalid prop: type checked failed for prop "disabled".Expected Boolean,got String with value "true"解决办法
Vue中的显示框/输入框设置为只读方式
最新发布
TC0221的博客
05-30 489
此属性用于输入字段为只读，可防止用户对值进行修改，但仍可选中对话框文字。1）disabled=“disabled”：此方法可使输入框变灰色。样式：光标点击是不显示光标的！
HTML中让表单input等文本框为只读不可编辑的方法
weixin_30311605的博客
12-30 429
方法1: onfocus=this.blur() 当鼠标放不上就离开焦点<input type="text" name="input1" value="中国" onfocus=this.blur()>方法2:readonly<input type="text" name="input1" value="中国" readonly><input type="text...
python去掉字符串开头的零_Python / Pandas-删除以字符串开头的列
weixin_39926639的博客
12-16 426
I have a dataframe like thisid 2013 Profits 2001 Revenues 1999 Assets...31 xxxx xxxx xxxx...I want to drop the columns that do not start with '201' (I only want to kee...
vue将输入框置灰_Vue动态控制input的disabled属性的方法
weixin_39638305的博客
12-20 5255
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？输入框的html源代码新增~通过F12查看实际页面渲染代码修改~通过F12查看实际页面渲染代码主要是通过 v-bind:disabled绑定 dataForm.id 的值来动态判断是否添加 disabled 属性，而...
通过disabled和readonly将input设置为只读效果
12-14
在HTML表单设计中，有时候我们需要用户只能查看输入框（input）中的内容而不能修改，这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的，但它们在功能上存在显著...
elementUI 设置input的只读或禁用的方法
01-21
只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。 禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled=”edit”就可以了 PS：下面看下elementui...
禁止input文本框输入实现属性
12-10
`readonly` 属性用于设置文本框为只读状态。这意味着用户在页面上看到的内容不能被修改。当设置 `readonly` 时，文本框仍然可以获取焦点，用户可以高亮选中文字并进行复制，但无法输入新的字符。后台在提交表单时仍...
设置input标签readonly状态下的输入框颜色
全场梦游c的博客
11-28 9900
一般情况下 readonly状态下的输入框时灰色，如果想要改变颜色则需要添加一个css样式即可。 此操作将灰色改为白色。 &lt;style&gt; input[readonly]{ background-color: #ffffff      (可根据需要改颜色) } &lt;/style&gt;  ...
jquery设置输入框为只读,在jquery中将文本框设置为只读，将背景颜色设置为灰色...
weixin_29280219的博客
12-31 712
Good day,I would like to make a text box in my jsp to become readonly and its background color to grey like disable in Jquery. The following is my code :if(a)$('#billAccountNumber').attr('readonly', '...
输入框置灰 还原
曾子墨
03-12 2415
var tipword = "请详细说明您的需求"; var tipstyle = {"color":"gray"}; var normalstyle = {"color":"black"}; $(function(){ $("#fwsC_web_memo") .val(tipword).css(tipstyle) .focus(function() { if($.trim($(this
html光标没在了,html – Internet Explorer 8：如何使只读文本输入没有光标
weixin_39969006的博客
06-09 133
我试图模拟Firefox禁用文本输入的外观和感觉：textarea和输入文本.我唯一需要担心的浏览器兼容性是Internet Explorer 8.我不必担心任何事情(Intranet)Internet Explorer不允许更改已禁用的测试输入的文本颜色.它确实允许更改背景颜色,但灰色背景颜色上的灰色文字难以辨认.我有一个输入框和文本区域声明如下：我通过CSS应用了以下样式：input[read...
移动端 input 加上 disabled=“disabled“ 输入框会变灰色 解决办法
weixin_43138882的博客
09-26 1195
移动端 input 加上 disabled=“disabled” 输入框会变灰色 解决办法 input[disabled]{ background:#fff; opacity:1 }，这样会变成白色 或者改成你需要的颜色就行，会好看些 如有不对或别的方法 请告知 ，每天积累一点！ ...
layui input标签设置只读 不可编辑 背景灰化
热门推荐
weixiao的博客
01-27 2万+
layui input标签设置只读 不可编辑 背景灰化方法记录： 1、 只读属性+背景灰化：readonly="true"style="background:#CCCCCC" 2、 禁用属性+背景灰化：disabled="disabled"style="background:#CCCCCC" <!-- 设置只读 背景灰化 --> <input type="text" id="name" name="name" style="background:#CCCCCC...
Vue框架开发Electron12 - 动态改变Element-Ui默认el-Input背景样式
qq_39388660的博客
09-09 6088
Element-ui是一个非常好的UI设计模块，它提供给我们很多好看的按钮样式，非常适用于快速搭建UI，下面说说如果使用了element-ui之后，要更改它默认的el-Input样式应该怎么操作。 使用调试工具找出他的样式默认表，具体操作如下： 从上图知道默认的样式是.el-input__inner,那下面在改成自己想要的颜色： <style > .el-input__i...
Vue 中，禁止编辑的方法
coinisi_li的博客
07-04 1万+
3.使用计算属性或变量控制编辑状态：可以使用 Vue 的计算属性或数据变量来控制输入框的编辑状态。通过根据特定条件设置变量的值，可以动态地启用或禁用输入框的编辑。在 Vue 中，禁止编辑的方法：以禁止编辑输入框为例。可以与isView之类结合使用，配合展示。属性：与原生 HTML 类似，Vue 中的输入框组件也通常支持。或者，如果使用了 Element UI 的。，可以禁用输入框，并阻止用户进行编辑。属性：在 Vue 中，可以通过绑定。，即可实现禁止编辑的效果。属性来禁止编辑输入框。
input 输入框置灰
05-12
要将输入框置灰，可以使用 CSS 样式来实现。具体的代码如下： ```html <input type="text" style="background-color: #ccc;" disabled> ``` 其中，`background-color` 属性设置背景色为灰色，`disabled` 属性设置输入框为禁用状态，即无法编辑。 需要注意的是，禁用状态下输入框的内容将无法提交到服务器端。如果需要提交内容，可以将输入框设置为只读状态，如下所示： ```html <input type="text" style="background-color: #ccc;" readonly> ``` 这样，输入框的内容仍然无法编辑，但是可以提交到服务器端。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值