Css

input

禁止输入

1
2
3
4
5
6
1: disabled   被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用
<input type="text" value="哈哈哈" disabled="disabled">

2: readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。
<input type="text" value="哈哈哈" readonly="readonly">

CSS3中新增了[resize]缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。
而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。textarea右下角有一个可以控制缩放的按钮。
一般情况下，textarea是被固定宽度和高度的，如果你不愿意让其任意缩放，你可以为textarea添加resize:none的css属性。这样就可以去除Webkit内核的浏览器的默认显示。

以下是resize属性的的各个取值:

1
2
3
4
5
resize:none; 用户不能操纵机制调节元素的尺寸
resize:both; 用户可以调节元素的宽度和高度
resize:horizontal;用户可以调节元素的宽度
resize:vertical;让用户可以调节元素的高度
resize:inherit;默认继承。

验证数字

1
2
限制input只能输入数字
<input type="number" onkeyup="this.value=this.value.replace(/\D/g,'')">

text

1
2
3
4
5
6
7
8
9
10
/* 单行溢出变点 */
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

/* 多行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;