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

字號(hào):


    本文實(shí)例講述了jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
    復(fù)制代碼 代碼如下:<!DOCTYPE html>
    <html>
    <head>
    <title>無標(biāo)題頁</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="" />
    <span id="numd">
    <input type="text" id="Nm" name="Nm" value="" />
    <div
    id="keybored">
    <input type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <input type="button" value="4" />
    <input type="button" value="5" />
    <input type="button" value="6" />
    <input type="button" value="7" />
    <input type="button" value="8" />
    <input type="button" value="9" />
    </div>
    </span>
    </body>
    </html>
    希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。