当前位置：首页 > 资讯 > 技术文档

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

时间：2022-03-15 07:17 编辑：来源：阅读：
扫一扫，手机访问

摘要：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>

希望本文所述对大家的jQuery程序设计有所帮助。

全部评论(0)

上一篇：jQuery plugin animsition使用小结
下一篇：Jquery 模板数据绑定插件的使用方法详解

资讯排行榜
更多>>