jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法

更新時(shí)間：2015年02月05日 16:38:14 作者：whazhl

這篇文章主要介紹了jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法,涉及jQuery功能的擴(kuò)展技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html>  

<html>  

<head>  

    <title>無(wú)標(biāo)題頁(yè)</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>