我有一个空白的HTML页面,现在我想实现鼠标点击任何地方都可以把光标放在那里,可以输入文字。
请问有什么简便的解决方案么?
你要做的无非就是一个网页白板,可以参考这个程序:https://www.codeproject.com/tips/417502/online-whiteboard-using-html-and-signalr
(这个程序比你的要求还复杂一些,比如可以画线段、方框、涂色,可以在线保存提交,如果你不需要这些,可以简化它,保留全屏的画布)
没有那么复杂吧,点击的时候,给document添加单击事件,单击后,在单击的位置加入一个可编辑的div就可以了啊~~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>input anywhere</title>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
</style>
<script type="text/javascript">
window.addEventListener('load', init, false);
function init() {
document.addEventListener('click', bodyAddDiv, false);
}
function bodyAddDiv(e) {
if (e.target.nodeName == 'DIV') {
return;
}
addDiv(e);
}
var divId = 0;
function addDiv(e) {
var div = document.createElement('DIV');
divId = divId + 1;
div.id = 'edit_' + divId;
div.contentEditable = true;
div.onclick = function(e) {
e.preventDefault();
}
div.style.width = '200px';
div.style.height = '200px';
div.style.border = 'solid 1px #ff0000';
div.style.top = e.y + 'px';
div.style.left = e.x + 'px';
div.style.position = 'fixed';
div.style.display = 'block';
document.body.appendChild(div);
}
</script>
</head>
<body>
</body>
</html>
请在chrome中执行,因为没考虑多浏览器的情况