ContentEditable任意位置输入

最新推荐文章于 2024-06-04 16:52:53 发布

Half0pen

最新推荐文章于 2024-06-04 16:52:53 发布

阅读量1.6k

点赞数

分类专栏： front end 文章标签：输入框光标 ios

front end 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

ios中contenteditable无法输入的问题，添加-webkit-user-select: auto 即可解决

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>dd</title>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script>
        $(function() {
            $('#btn').click(function() {
                $('#o').focus();
                var str = "<img src='http://g.100xuexi.com/CssModel/100eshu/Images/face/3.gif' />";
                //$(str).appendTo($('#o'));
                _insertimg(str);
            });
        });
        //
        function _insertimg(str) {
            var selection = window.getSelection ? window.getSelection() : document.selection;
            var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            if (!window.getSelection) {
                document.getElementById('o').focus();
                var selection = window.getSelection ? window.getSelection() : document.selection;
                var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
                range.pasteHTML(str);
                range.collapse(false);
                range.select();
            } else {
                document.getElementById('o').focus();
                range.collapse(false);
                var hasR = range.createContextualFragment(str);
                var hasR_lastChild = hasR.lastChild;
                while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
                    var e = hasR_lastChild;
                    hasR_lastChild = hasR_lastChild.previousSibling;
                    hasR.removeChild(e)
                }
                range.insertNode(hasR);
                if (hasR_lastChild) {
                    range.setEndAfter(hasR_lastChild);
                    range.setStartAfter(hasR_lastChild)
                }
                selection.removeAllRanges();
                selection.addRange(range)
            }
        }
    </script>
</head>

<body>
    <div id="o" contenteditable="true" style="border:1px solid black;"></div>
    <input type="button" value="插入表情" id="btn" />
</body>




</html>