您好，我有一个文本框，当我实现 contenteditable 时它工作正常。但是当我实现 jquery 和 javascript 时，contenteditable 完全停止工作。我不知道这是否正常，如有任何帮助，我们将不胜感激。
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$(".note").resizable();
$(".note").draggable();
});
</script>
<title>Stickynote</title>
<img src="images/logo.png">
</head>
<body>
<div class="note" contenteditable="true">
</div>
</body>
</html>
CSS
body {
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%;
}
html img {
display: block;
margin-left: auto;
margin-right: auto;
}
.note {
width: 300px;
height: 300px;
background-image: url("images/stickynote.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 10px;
}
最佳答案
.draggable() 正在阻止可编辑行为。您可以像下面这样解决这个问题:
$.fn.makeEditable = function () {
return this.each(function () {
$(this).on('cilck mousedown', function () {
$(this).focus();
});
});
};
$('.note').draggable().resizable().makeEditable();
关于javascript - contenteditable = true 在应用 javascript 时停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31795489/