可以使用contenteditable
属性使div
元素可以输入内容,而且不会有input
类型输入框的默认样式。下面是实现的步骤及示例说明:
- 创建一个
div
元素,并添加contenteditable
属性
<div contenteditable></div>
- 设置
div
的样式以样式化输入框
div {
width: 200px;
height: 100px;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
line-height: 1.5;
outline: none;
background-color: #f9f9f9;
}
在上面的代码中,设置了div
元素的样式,使其看起来更像输入框,并用outline:none;
消除了默认的轮廓。
- 使用
textContent
属性获取div
输入框中的文本内容
const div = document.querySelector('div');
const content = div.textContent;
console.log(content);
在上面的代码中,使用querySelector()
获取div
元素,然后使用textContent
属性获取div
输入框中的文本内容,并在控制台中输出。
示例1:创建一个简单的div输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div输入框示例</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
line-height: 1.5;
outline: none;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div contenteditable></div>
<script>
const div = document.querySelector('div');
const content = div.textContent;
console.log(content);
</script>
</body>
</html>
示例2:使用div替代textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替代textarea示例</title>
<style>
div {
width: 100%;
min-height: 100px;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
line-height: 1.5;
outline: none;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div contenteditable></div>
<script>
const div = document.querySelector('div');
const content = div.textContent;
console.log(content);
</script>
</body>
</html>
在这个示例中,我们将div
元素设为100%宽度,并添加了一个最小高度,以具有与textarea
相同的外观。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:div可以输入内容不用input作为输入框屏蔽自动的input样式 - Python技术站