<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 输入框 */
#dzm-textarea {
padding: 5px;
border: 1px solid red;
}
/* 输入框为空时显示 placeholder */
#dzm-textarea:empty:before {
content: attr(placeholder);
color: red;
}
/* 输入框获取焦点时移除 placeholder */
#dzm-textarea:focus:before {
content: none;
}
</style>
</head>
<body>
<!-- textarea -->
<div id="dzm-textarea" class="dzm-textarea" contenteditable="true" placeholder="请输入内容" style="resize: both; overflow: auto;">
<!-- 内部内容 -->
<div>dzm-text</div>
</div>
<script>
// 调用
select('dzm-textarea')
// 自定义文本框全选内容
function select(id) {
if (document.selection) {
var range = document.body.createTextRange()
range.moveToElementText(document.getElementById(id))
range.select();
} else if (window.getSelection) {
var range = document.createRange()
range.selectNodeContents(document.getElementById(id))
window.getSelection().removeAllRanges()
window.getSelection().addRange(range)
}
}
</script>
</body>
</html>
使用 contenteditable=“true“ 实现的文本框全选内容
最新推荐文章于 2024-03-05 17:44:52 发布