我的第一个随笔,记录主要用来整理学习的知识点
1.input 创建单行文本框
<input type="text" size="10" maxlength="30" value="text1">
size :指定文本框中能够显示的字符数。
value:设置文本框的初始值
maxlength :指定文本框可以接收的最大字符数
type="text":是定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符
2.<textarea>创建多行文本框
<textarea cols="25" rows="5">text2</textarea>
<textarea>是多行文本框,需要指定文本框的大小。
rows:指定的是文本框的字符行数。
cols:指定的是文本框的字符列数。
input 和<textarea>不同之处
1.<textarea>多行显示字符串。input只能单行显示
2.<textarea>的初始值必须要放在<textarea>和</textarea>之间
3.input是单标签 ,<textarea>是闭合标签
4.<textarea>的值是纯文本;<input>的值根据类型不同而不同;
3.div 模拟textarea
<div class="test3" contenteditable="true"></div> .test3{ width: 400px; min-height: 60px;设置元素的最小高度 line-height: 30px; 设置行高 max-height: 300px;设置元素最大高度 _height: 60px;/* IE6浏览器对min/max家族不屑一顾,结合其内部元素溢出会撑开父标签高宽的特性,所以针对IE6 直接定高 */ margin: 0 auto;外边距 padding: 10px; 内边距 outline: 0; / 去掉虚框 * 浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是 没有虚框显示的 */ border: 1px solid #a0b3d6;#设置边框1px厚,实线,蓝色的边框线 border-radius: 4px;为元素添加圆角边框! font-size: 12px; word-wrap: break-word; 允许长的内容长单词或 URL 地址内部可以自动换行。 overflow-x: hidden;左/右边缘进行裁剪,裁剪内容 - 隐藏滚动条 overflow-y: auto;上/下边缘的裁剪,裁剪内容 - 不隐藏滚动条 _overflow-y: visible; -webkit-user-modify: read-write-plaintext-only; }
contentEditable='true': ture设置为可编辑文本内容, false为不可编辑
contenteditable="true"复制粘贴的时候不能过滤html标签;
read-write-plaintext-only:内容可读写,但粘贴内容中的富文本格式(如文本的颜色、大小,图片等)会丢失。内容类似于以纯文本显示
user-modify需加浏览器前缀,需要写成 -webkit-user-modify
此处代码来着其他博主
div 和 textare文本框的不同之处
1.div可以使标签高度随着文本内容高度自动撑开。使用<textarea>标签。但是标签高度不会随文本高度自动撑开,而是出现滚动条