html设置文本框只读属性,juqery/js/css设置文本框只读属性的方法

一、设置HTML表单文本框为只读的几种方式

有时候，我们希望表单中的文本框是只读的，让用户只能查看信息而不能修改其中的信息，使 input type=”text” name=”input” value=”HTML” 的内容中value得值，就是”HTML”不可以修改。实现的方式有如下几种。

方法一：修改 onfocus 参数为 this.blur()

方法二：添加 readonly 参数

方法三：添加 disabled 参数

二、jQuery将text文本框设置为只读$("#c_price").attr("readonly",true);

三、CSS控制文本框的只读属性的方法

css 封装整个只读文本框的属性:.TextBoxReadOnly

{

border:1px solid #C0C0C0;

text-align:left;

background-color:#D3D3D3;

width:100px;

readonly:expression(this.readOnly=true);

}

它工作得很好, 经过测试, 发现了一个问题: 用js 代码: txt.readOnly=false , 不能使文本框回到可读写状态, 用:

txt.className="OtherStyle";txt.readOnly=false;也不行! 总之, 一旦使用css 修饰了该控件使它只读, 就不能再使它恢复到可读写的状态了. 即使换成其它的css 样式, 有知道的朋友，请告知下哦。.

于是乎, 又写了一个样式:.TextBoxReadWrite

{

border:1px solid #C0C0C0;

text-align:left;

background-color:#FFFFFF;

width:100px;

readonly:expression(this.readOnly=false);

}

这样再用js 切换样式, 就可以在只读与可读写之间来回切换了, 把这个过程封装到一个函数中, 在程序中就可以自由调用了, 虽然有点绕, 不过是目前我找到的最好的办法.

切换的js:function f1(ctr,isReadOnly)

{

var octr=document.getElementById(ctr);

if(octr!=null)

{

if(isReadOnly)

octr.className="TextBoxReadOnly";

else

octr.className="TextBoxReadWrite";

}

调用:function f3()

{

f1("",true);

}

html设置文本框只读属性,juqery/js/css设置文本框只读属性的方法相关推荐

HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线.删除线等.除了text-decoration之外,CSS还有很多技术方案可以给文本添加 ...
css文本字体形状_使用CSS更改文本字体
css文本字体形状 In the last module, we discussed text formatting. By now, you already know how to work wit ...
html设置背景图片高度,如何使用CSS设置背景图像的大小？
如何使用CSS设置背景图像的大小?下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法,希望对大家有所帮助. image CSS background-size属性可用于设置背景图像大小:使 ...
YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法（被maven打包顶替了）
YUI Compressor Maven插件可以压缩/合并js或css文件,经常用在Maven项目中,但最近发现在wabapp中执行了 mvn install 命令进行发布之后,终端中显示插件已经执行 ...
js+css实现验证码框,前端实现6位验证码输入框效果
这个验证码输入应用场景非常的多,看起来很简单的,但是做起来还是有一些坑. 首先的想法就是6个input框,每输入一个数字之后,切换到下一个input,即切换focus,如果输入很快的话,会导致切换不过 ...
html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)
我们在做前端时,经常会要求文字只在一行显示.当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?通过CSS中的word-break,white-s ...
怎样用css设置横向的滚动条,如何用CSS设置滚动条颜色？
我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 页面滚动条代码及其解释如下: scroll ...
html搜索框美化代码单词,CSS 漂亮搜索框美化代码
1.美化滚动条 * { & 大家都知道select下拉框是最难美化的.这里有个Jquery的插件可以使下拉框变的魔幻起来. Jquery chosen插件. 美化网页元素3.1 为 ...
html设置背景图片高度自适应屏幕,CSS设置背景图宽度100%，高度自适应
div的高度随背景图片的高度变化: 原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比.高度设置为0..newcenter{ width: 100 ...

html设置文本框只读属性,juqery/js/css设置文本框只读属性的方法

html设置文本框只读属性,juqery/js/css设置文本框只读属性的方法相关推荐

最新文章

热门文章