如何实现div模拟input标签

2025-09-27 12:11:55

1、浏览器能够支持什么样的属性,完全是由浏览常裹器的内核来决定的,在chrmoe, IE, firefox等主流浏览器里面,有contenteditable这样一个属性,这个属性就可以标记为可输入内容。以下是兼容的浏览器。

如何实现div模拟input标签

2、代码:

<div contenteditable="true">我是一个可被编辑的DIV</div>

如何实现div模拟input标签

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>

如何实现div模拟input标签

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢