编程 Javascript

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

Posted in Javascript onFebruary 05, 2015

本文实例讲述了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程序设计有所帮助。

- Author -

whazhl

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

疯狂Jquery第一天(Jquery学习笔记)

May 11 Javascript

如何使用jQuery来处理图片坏链具体实现步骤

May 02 Javascript

node.js中的fs.unlink方法使用说明

Dec 15 Javascript

Js+php实现异步拖拽上传文件

Jun 23 Javascript

用js实现每隔一秒刷新时间的实例(含年月日时分秒)

Oct 25 Javascript

js时间戳与日期格式之间转换详解

Dec 11 Javascript

Bootstrap treeview实现动态加载数据并添加快捷搜索功能

Jan 07 Javascript

vue使用iframe嵌入网页的示例代码

Jun 09 Javascript

JS实现将二维数组转为json格式字符串操作示例

Jul 12 Javascript

react中使用css的7中方式(最全总结)

Feb 11 Javascript

JavaScript常用工具方法封装

Feb 12 Javascript

jQuery实现的卷帘门滑入滑出效果【案例】

Feb 18 jQuery

Jquery中offset()和position()的区别分析

Feb 05 #Javascript

JS实现一个按钮的方法

Feb 05 #Javascript

JS继承用法实例分析

Feb 05 #Javascript

Javascript实现Web颜色值转换

Feb 05 #Javascript

JS表的模拟方法

Feb 05 #Javascript

JS的数组迭代方法

Feb 05 #Javascript

js实现照片墙功能实例

Feb 05 #Javascript

You might like

随时给自己贴的图片加文字的php水印

2007/03/16 PHP

php安全配置如何配置使其更安全

2011/12/16 PHP

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

2013/04/26 PHP

php强大的时间转换函数strtotime

2016/02/18 PHP

PHP获取页面执行时间的方法（推荐）

2016/12/10 PHP

通过JAVAScript实现页面自适应

2007/01/19 Javascript

JavaScript实现页面滚动图片加载(仿lazyload效果)

2011/07/22 Javascript

js关闭子窗体刷新父窗体实现方法

2012/12/04 Javascript

nodejs中简单实现Javascript Promise机制的实例

2014/12/06 NodeJs

Css3制作变形与动画效果

2015/07/24 Javascript

jQuery 全选全部选反选实现代码

2016/08/17 Javascript

CSS3 3D 技术手把手教你玩转

2016/09/02 Javascript

jQuery EasyUI 获取tabs的实例解析

2016/12/06 Javascript

jQuery遍历节点方法汇总(推荐)

2017/05/13 jQuery

JS仿QQ好友列表展开、收缩功能(第二篇)

2017/07/07 Javascript

微信小程序开发之animation循环动画实现的让云朵飘效果

2017/07/14 Javascript

vue技术分享之你可能不知道的7个秘密

2018/04/09 Javascript

详解VScode编辑器vue环境搭建所遇问题解决方案

2019/04/26 Javascript

深入理解redux之compose的具体应用

2020/01/12 Javascript

在Uni中使用Vue的EventBus总线机制操作

2020/07/31 Javascript

[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP

2016/03/03 DOTA

Python爬虫包 BeautifulSoup 递归抓取实例详解

2017/01/28 Python

Python3 SSH远程连接服务器的方法示例

2018/12/29 Python

Python实现查找数组中任意第k大的数字算法示例

2019/01/23 Python

python实现五子棋游戏（pygame版）

2020/01/19 Python

Python tcp传输代码实例解析

2020/03/18 Python

解决jupyter notebook 前面书写后面内容消失的问题

2020/04/13 Python

父亲八十大寿答谢词

2014/01/23 职场文书

作文批改评语

2014/12/25 职场文书

公司租车协议书

2015/01/29 职场文书

2015年预备党员自我评价

2015/03/04 职场文书

2015年幼师工作总结

2015/04/28 职场文书

公司仓库管理制度

2015/08/04 职场文书

提升Nginx性能的一些建议

2021/03/31 Servers

Nginx流量拷贝ngx_http_mirror_module模块使用方法详解

2022/04/07 Servers

Nginx代理Redis哨兵主从配置的实现

2022/07/15 Servers