下载文档原格式
CSS控制文本框的只读属性的方法●解决方案一：有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国">的内容，"中国"两个字不可以修改。
实现的方式归纳一下，有如下几种：方法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" name="input1" value="中国" readonly="true">方法3：disabled<input type="text" name="input1" value="中国" disabled="true">完整的例子：<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456" disabled="true"readOnly="true" /> disabled="true" //此果文字会变成灰色，不可编辑readOnly="true" //文字不会变色，也是不可编辑的css屏蔽输入：<input style="ime-mode: disabled">有两种方法第一：disabled="disabled"这样定义之后被禁用的input 元素既不可用，也不可点击。
jquery对标签添加只读（readonly）或者禁⽤（disabled）属性⽬录⼀、jQuery⼆、关于readonly属性三、jquery 设置disabled属性四、jquery动态添加⽂本框的readonly只读属性⼀、jQueryjQuery是⼀个JavaScript库。
jQuery 极⼤地简化了 JavaScript 编程。
jQuery 很容易学习。
实例：$(document).ready(function(){$("p").click(function(){$(this).hide();});});源码：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="https:///jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>如果你点我，我就会消失。
</p><p>继续点我!</p><p>接着点我!</p></body></html>运⾏结果：上图运⾏结果只要点击⽂字就会消失，感兴趣的⼩伙伴可以下去试⼀下⼆、关于readonly属性例1、jquery 设置readonly属性$('input').attr("readonly","readonly") //将input元素设置为readonly$('input').removeAttr("readonly"); //去除input元素的readonly属性if($('input').attr("readonly") == true)//判断input元素是否已经设置了readonly属性例2、对于为元素设置readonly属性和取消readonly属性的⽅法$('input').attr("readonly",true)//将input元素设置为readonly$('input').attr("readonly",false)//去除input元素的readonly属性$('input').attr("readonly","readonly")//将input元素设置为readonly$('input').attr("readonly","")//去除input元素的readonly属性三、jquery 设置disabled属性例1、jquery 设置disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').removeAttr("disabled");//去除input元素的disabled属性if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性例2、对于为元素设置disabled属性和取消disabled属性的⽅法$('input').attr("disabled",true)//将input元素设置为disabled$('input').attr("disabled",false)//去除input元素的disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').attr("disabled","")//去除input元素的disabled属性四、jquery动态添加⽂本框的readonly只读属性<input id="test" type="text" />$("#test").attr({"readonly":"readonly"}); //添加readonly属性// 或者$("#ID").attr({ readonly: 'true' });$("#test").removeAttr("readonly"); //去除readonly属性到此这篇关于jquery对标签添加只读（readonly）或者禁⽤（disabled）属性的⽂章就介绍到这了,更多相关jquery对标签添加只读或禁⽤属性内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
CSS文本样式的技巧知识点CSS文本样式是网页设计中必不可少的一部分，通过合适的文本样式可以提升网页的可读性和美观度。
本文将介绍一些常用的CSS文本样式的技巧知识点，帮助您更好地运用CSS来设计网页的文本。
一、字体样式字体样式是CSS文本样式中最基本的部分。
通过设置字体的相关属性，可以改变字体的外观。
以下是一些常用的字体样式技巧：1. 字体族：通过设置字体族属性，可以指定网页中所使用的字体。
例如，可以通过设置font-family属性为"Arial, sans-serif"来指定网页中的字体为Arial，如果用户的电脑上没有安装Arial字体，则会使用sans-serif作为替代字体。
2. 字体大小：通过设置font-size属性，可以改变字体的大小。
常用的单位有像素（px）、百分比（%）和EM。
例如，可以设置font-size: 16px来指定字体大小为16像素。
3. 字体样式：通过设置font-style属性，可以改变字体的样式，常用的值包括normal（默认样式）、italic（斜体）和oblique（倾斜）。
例如，可以设置font-style: italic来让字体呈现斜体效果。
二、文本修饰文本修饰可以让字体在视觉上更加突出或者强调。
以下是一些常用的文本修饰技巧：1. 文本颜色：通过设置color属性，可以改变文本的颜色。
可以使用具体的颜色值（如#FF0000表示红色）或者预定义的颜色名称（如red表示红色）。
2. 文本加粗：通过设置font-weight属性，可以让文本加粗。
常用的值有normal（默认样式）和bold（加粗样式）。
例如，可以设置font-weight: bold来让文本加粗。
3. 文本下划线：通过设置text-decoration属性，可以在文本下面加上下划线。
常用的值有none（无下划线）、underline（下划线）和overline（上划线）。
CSS-字体和⽂本属性设置随学笔记CSS-美化⽹页元素-字体和⽂本属性使⽤CSS样式美化⽹页⽂本具有如下意义。
1. 有效的传递页⾯信息2. 使⽤CSS美化过的页⾯⽂本，使页⾯漂亮、美观，吸引⽤户3. 可以很好的突出页⾯的主题内容，使⽤户第⼀眼可以看到页⾯主要内容4. 具有良好的⽤户体验⼀、字体属性1. 字体设置CSS使⽤font-family属性定义⽂本的字体系列，字体可以使⽤英⽂字体,也可以使⽤多个字体，各种字体之间必须使⽤英⽂状态下的逗号隔开；注意事项：⼀般情况下，如果有空格隔开的多个单词组成的字体，加引号；尽量使⽤系统默认⾃带的字体，保证在任何⽤户的浏览器中都能正确显⽰；最常见的⼏个字体：body{font-family： 'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB';}使⽤多个字体的好处是：系统按顺序检测浏览器是否有这个字体，如果不存在，就会转向下⼀个字体，如果存在，就优先使⽤；实际开发中，字体设置常⽤于<body>标签，按照团队约定来设置字体。
<style>h2 {font-family: '微软雅⿊';}.songti {font-family: '宋体';}#kaiti {font-family: '楷体'}* {font-family: '⿊体';}</style></head><body><!-- CSS使⽤font-family属性定义⽂本的字体系列 --><h2>泰⼽尔经典语录</h2><p class="songti">世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。
——泰⼽尔《鱼和飞鸟的故事》</p><p id="kaiti">纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
CSS3属性line-clamp控制⽂本⾏数的使⽤说明：限制在⼀个块元素显⽰的⽂本的⾏数。
-webkit-line-clamp 是⼀个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。
常见结合属性：display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒⼦模型显⽰。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的⼦元素的排列⽅式。
text-overflow，可以⽤来多⾏⽂本的情况下，⽤省略号“...”隐藏超出范围的⽂本。
今天接到优化需求，帖⼦列表⾥的内容要求缩略⾄3⾏，并带‘…’省略号<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>cline-clamp</title><style>.box{width: 200px;height: 300px;border:1px solid black;}p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; /*设置p元素最⼤4⾏，⽗元素需填写宽度才明显*/text-overflow: ellipsis;overflow: hidden;/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on *//*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/ word-wrap:break-word; word-break:break-all;} </style></head><body><div class="box"><p> static：对象遵循常规流。
CSS控制文本框的只读属性的方法
●解决方案一：
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使
<input type="text" name="input1" value="中国">
的内容，"中国"两个字不可以修改。
实现的方式归纳一下，有如下几种：
方法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" name="input1" value="中国" readonly="true">
方法3：disabled
<input type="text" name="input1" value="中国" disabled="true">
完整的例子：
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456" disabled="true"readOnly="true" /> disabled="true" //此果文字会变成灰色，不可编辑
readOnly="true" //文字不会变色，也是不可编辑的
css屏蔽输入：<input style="ime-mode: disabled">
有两种方法第一：disabled="disabled"这样定义之后被禁用的input 元素既不可用，也不可点击。
第二：readonly="readonly" 只读字段是不能修改的。
不过，用户仍然可以使用tab 键切换到该字段，还可以选中或拷贝其文本。
●解决方案二：
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)
{
varoctr=document.getElementById(ctr);
if(octr!=null)
{
if(isReadOnly)
octr.className="TextBoxReadOnly";
else
octr.className="TextBoxReadWrite";
}
}
调用:
function f3()
{
f1("<%=txt1.ClientID %>",true);
}
HTML页面控制方式：
<input name="" type="text" readonly="readonly" />。
