如何在HTML页面上实现随意位置输入文字

我有一个空白的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中执行,因为没考虑多浏览器的情况