网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 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="" />
    <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>
    希望本文所述对大家的jQuery程序设计有所帮助。
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/16 15:15:45