<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style>
.edit_container {
width: 500px;
height: 30px;
background: #599fc2;
padding: 3px;
border-radius: 3px;
line-height: 30px;
}
.enable_edit {
border: 1px dashed #1248dd;
}
.enable_edit div {
display: inline;
}
</style>
<body>
<div class="edit_container" contenteditable="true">我是一段可編輯的文字</div>
</body>
<script>
$(() => {
// 聚焦事件
$('.edit_container').focus(() => {
$('.edit_container').addClass('enable_edit');
}).blur(() => {
$('.edit_container').removeClass('enable_edit');
});
//ESC事件
$('body').keydown(e => {
if (e.keyCode == 13) {
$('.edit_container').children('div').remove();
}
}).keyup(e => {
if (e.keyCode == 13) {
$('.edit_container').children('div').remove();
}
});
});
</script>
</html>
contenteditable=“true”編輯狀態時不允許換行效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.