如何实现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连接错误
  • 热门搜索
    山西太原旅游攻略 湖南凤凰旅游 旅游景点规划 我国十大旅游胜地 美国东海岸旅游攻略 山东长岛旅游 昆山旅游景点大全 陕西西安旅游景点 黄河壶口瀑布旅游攻略 青岛旅游图片