如何实现div模拟input标签

 时间:2026-02-15 11:06:43

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标签

  • js中如何修改html属性 css属性
  • vscode 如何预览html文件
  • Jquery如何查找指定div里的a标签
  • jquery如何实现鼠标放上div时改变其大小
  • 本地sqlyog连接错误
  • 热门搜索
    灵山大佛旅游攻略 保定旅游网 沙家浜旅游攻略 海南文昌旅游 去美国旅游签证 色达旅游 余姚旅游网 去台湾旅游攻略 红河州旅游景点大全 上海到周庄旅游攻略