jquery实现在光标位置插入内容的方法

204 阅读 0 评论 135 点赞

我是靠谱客的博主开朗小蜜蜂，最近开发中收集的这篇文章主要介绍jquery实现在光标位置插入内容的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了jquery实现在光标位置插入内容的方法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:

<!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>