如何实现div模拟input标签
1、浏览器能够支持什么样的属性,完全是由浏览常裹器的内核来决定的,在chrmoe, IE, firefox等主流浏览器里面,有contenteditable这样一个属性,这个属性就可以标记为可输入内容。以下是兼容的浏览器。
2、代码:
<div contenteditable="true">我是一个可被编辑的DIV</div>
3、那么如何让这个DIV变得跟一个输入框一样呢,这个时候就需要使用到css样式来调整div的显示
css代码泛亲板:
textarea {
height: 28px;
width: 400px;
}
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
input {
margin-top: 5px;
width: 400px;
}
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset; 耻陕
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}
html代码:
<textarea>编辑区域1</textarea>
<div id="textarea" contenteditable>编辑区域1</div>
<input value="编辑区域2" />
<div id="input" contenteditable>编辑区域2</div>