JS实现在光标位置插入内容

最新推荐文章于 2024-05-28 20:40:04 发布
最新推荐文章于 2024-05-28 20:40:04 发布
阅读量3.8k 收藏
点赞数
分类专栏： Web研发，前端 文章标签： js 光标
<!DOCTYPE html>
<html>
<head>
    <title>无标题页</title>

    <script type="text/javascript" src="jquery-1.7.2.min。js"></script>

    <script type="text/javascript">
        (function ($) {
            $.fn.extend({
                insertAtCaret: function (myValue) {
                    var $t = $(this)[0];
                    if (document.selection) {
                        this.focus();
                        sel = document.selection.createRange();
                        sel.text = myValue;
                        this.focus();
                    } else
                        if ($t.selectionStart || $t.selectionStart == '0') {
                            var startPos = $t.selectionStart;
                            var endPos = $t.selectionEnd;
                            var scrollTop = $t.scrollTop;
                            $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                            this.focus();
                            $t.selectionStart = startPos + myValue.length;
                            $t.selectionEnd = startPos + myValue.length;
                            $t.scrollTop = scrollTop;
                        } else {
                            this.value += myValue;
                            this.focus();
                        }
                }
            })
        })(jQuery);

        $(document).ready(function () {
            $("#numd").bind("mouseleave", function () {
                document.getElementById('keybored').style.display = 'none';
                document.getElementById('Nm').blur();
            });

            $("#Nm").focus(function () {
                document.getElementById('keybored').style.display = '';
            });
            $(".readbtns").click(function () {
                $("#Nm").insertAtCaret($(this).val());

            });

        });

    </script>

</head>
<body>
    <ul>
        <li>
            <input />
            <div>
            </div>
        </li>
    </ul>
    <input id="hid" type="text" value="" style="display: none" />
    <span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">
        <input type="text" id="Nm" name="Nm" value="" />
        <div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"
            id="keybored">
            <input type="button" class="readbtns" value="1" />
            <input type="button" class="readbtns" value="2" />
            <input type="button" class="readbtns" value="3" />
            <input type="button" class="readbtns" value="4" />
            <input type="button" class="readbtns" value="5" />
            <input type="button" class="readbtns" value="6" />
            <input type="button" class="readbtns" value="7" />
            <input type="button" class="readbtns" value="8" />
            <input type="button" class="readbtns" value="9" />
        </div>
    </span>
</body>
</html>



参考资料： jquery实现在光标位置插入内容 http://www.studyofnet.com/news/620.html

AilsaRui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript控制在光标位置插入文字适合表情的插入
12-11
直接上代码吧，用js控制在光标位置插入。 在实现表情的插入时用到了。 代码如下: <span xss=removed><html> <head> [removed] function test(str){ var tc = document.getElementById(“mytextarea”); var tclen = tc.value.length; tc.focus(); if(typeof document.selection != “undefined”) { document.selection.createR
javascript实现 在光标处插入指定内容
10-30
javascript实现 在光标处插入指定内容 javascript是一种广泛应用于网页开发的脚本语言，它可以实现很多有趣和实用的功能。今天，我们来学习如何使用javascript实现在光标处插入指定内容。 在上面的代码中，我们...
在光标位置插入内容的jquery实现方式
whazhl的专栏
01-16 1102
无标题页 (function ($) { $.fn.extend({ insertAtCaret: function (myValue) { var $t = $(this)[0]; if (document.selecti
vue+antd实践：在输入框光标处插入内容
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-28 578
介绍了如何在vue+antd项目中，实现在输入框光标处插入内容。
在光标位置后面添加内容
Salunone的博客
09-02 356
function pasteHtmlAtCaret(html) { var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); r
js实现在光标的位置 添加内容
嘿嘿
01-15 1377
原生js的方法： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> ...
js 光标处插入文字
weixin_41859887的博客
03-03 1396
//在光标处插入文字 //obj获取标签ID //str要插入的字符 function insertText(obj, str) { if(document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if(typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number')
jquery实现在光标位置插入内容的方法
10-24
在本篇文档中，我们主要讨论了使用jQuery实现光标位置插入内容的方法，该方法涉及到了jQuery功能的扩展技巧，对于需要在Web页面上实现这一功能的开发者来说具有一定的参考价值。 首先，文中提到了jQuery本身的一些...
JQuery在光标位置插入内容的实现代码
10-29
本文将详细解释如何使用JQuery在光标位置插入内容，并展示实现代码。 首先，我们了解不同浏览器处理光标位置和插入内容的方式。在Internet Explorer（IE）浏览器中，可以使用`document.selection`对象和`...
JS在可编辑的div中的光标位置插入内容的方法
10-25
关于在可编辑的div中插入内容到光标位置的知识点可以详细展开为以下几点： 1. 可编辑的div（contenteditable）：HTML5新增了一个全局属性contenteditable，它可以使网页元素变得可编辑。通过将contenteditable设置...
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
本文将详细介绍如何在Vue中实现在可编辑div的光标位置插入内容，并提供相关代码示例。 首先，我们需要一个可编辑的div元素，通过设置`contenteditable="true"`属性来使其变为可编辑。以下是一个简单的HTML结构： `...
往光标所在位置插入值的js代码
10-26
往输入域中插入字符串(光标所在位置)，在本文将为大家介绍下使用js是如何实现的，感兴趣的朋友可以参考下
javascript获得光标所在的文本框(text/textarea)中的位置
12-10
js获得光标所在的文本框(text/textarea)中的位置 jb51 HELLO! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js 获取光标位置并插入文本
奇点的博客
11-12 1277
主要的属性 element.selectionStart; // 获取光标开始的位置 element.selectionEnd; // 获取光标结束的位置 设置光标位置直接赋值就行 element.selectionStart=1
JS在指定光标位置处插入内容
weixin_42565367的博客
03-04 1106
JS在指定光标位置处插入内容 知识点： selectionStart：光标选区开始位置； selectionEnd：光标选区结束位置 setSelectionRange ：设定 或 元素中当前选中文本的起始和结束位置。语法： element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]); 参数说明： 如果 selectionEnd 小于 selectionStart，则二者都会被看作 selectionEnd
input通过JS手动向光标、选中位置插入、拼接内容至光标处 选中处
lys20000913的博客
11-19 1497
向input光标处插入内容
JS获取鼠标光标位置并在光标位置添加内容
About_zero的博客
06-28 4407
JS获取鼠标光标位置并插入内容
JS在可编辑的div中的光标位置插入内容或表情
06-10
要实现在可编辑的div中插入内容或表情，需要先获取光标位置，然后在该位置插入内容或表情。 获取光标位置的方法可以使用window.getSelection()函数，该函数返回一个Selection对象，其中包含了光标的位置信息。通过Selection对象的getRangeAt()方法可以获取当前光标所在的Range对象，进而获取光标位置。 插入内容或表情可以通过Range对象的insertNode()方法实现，该方法可以将一个节点插入到当前光标位置。 以下是一个示例代码： ```javascript // 获取可编辑div的DOM节点 var editableDiv = document.getElementById('editableDiv'); // 在div中插入内容 function insertContent(content) { var range = window.getSelection().getRangeAt(0); var node = document.createTextNode(content); range.insertNode(node); } // 在div中插入表情 function insertEmoji(emojiUrl) { var range = window.getSelection().getRangeAt(0); var img = document.createElement('img'); img.src = emojiUrl; range.insertNode(img); } ``` 在调用insertContent()或insertEmoji()函数时，可以传入需要插入的内容或表情的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值