编程 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 相关文章推荐

javascript 隐藏/显示指定的区域附HTML元素【legend】用法

Mar 05 Javascript

解决Extjs上传图片无法预览的解决方法

Mar 22 Javascript

jquery等待效果示例

May 01 Javascript

JavaScript获取页面中第一个锚定文本的方法

Apr 03 Javascript

javascript实现实时输出当前的时间

Apr 27 Javascript

JavaScript模块规范之AMD规范和CMD规范

Oct 27 Javascript

从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例

Apr 13 Javascript

Angular2使用vscode断点调试ts文件的方法

Dec 13 Javascript

基于 D3.js 绘制动态进度条的实例详解

Feb 26 Javascript

vue router 跳转时打开新页面的示例方法

Jul 28 Javascript

Vue路由对象属性 .meta $route.matched详解

Nov 04 Javascript

electron+vue实现div contenteditable截图功能

Jan 07 Javascript

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

基于mysql的bbs设计（四）

2006/10/09 PHP

PHP中图片等比缩放的实例

2013/03/24 PHP

php遍历数组的4种方法总结

2014/07/05 PHP

TP(thinkPHP)框架多层控制器和多级控制器的使用示例

2018/06/13 PHP

浅谈php://filter的妙用

2019/03/05 PHP

Laravel 实现关系模型取出需要的字段

2019/10/10 PHP

javascript-TreeView父子联动效果保持节点状态一致

2007/08/12 Javascript

ExtJs中简单的登录界面制作方法

2010/08/19 Javascript

qTip 基于JQuery的Tooltip插件[兼容性好]

2010/09/01 Javascript

在Windows上安装Node.js模块的方法

2011/09/25 Javascript

JavaScript中判断页面关闭、页面刷新的实现代码

2014/08/27 Javascript

一个JavaScript去除字符串末尾的空白实例代码

2014/09/22 Javascript

jQuery实现DIV层收缩展开的方法

2015/02/27 Javascript

javascript实现简单加载随机色方块

2015/12/25 Javascript

JS仿京东移动端手指拨动切换轮播图效果

2020/04/10 Javascript

Vue.js常用指令之循环使用v-for指令教程

2017/06/27 Javascript

简单了解小程序+node梳理登陆流程

2019/06/24 Javascript

js代码编写无缝轮播图

2020/09/13 Javascript

python网络编程学习笔记(七)：HTML和XHTML解析(HTMLParser、BeautifulSoup)

2014/06/09 Python

python 数据清洗之数据合并、转换、过滤、排序

2017/02/12 Python

Python和C/C++交互的几种方法总结

2017/05/11 Python

python检测IP地址变化并触发事件

2018/12/26 Python

python标记语句块使用方法总结

2019/08/05 Python

Python基于Tensor FLow的图像处理操作详解

2020/01/15 Python

使用HTML5 Canvas API控制字体的显示与渲染的方法

2016/03/24 HTML / CSS

巴西最大的珠宝连锁店：Vivara

2019/04/18 全球购物

英国折扣高尔夫商店：Discount Golf Store

2019/11/19 全球购物

药学专业大专生的自我评价

2013/12/12 职场文书

学习雷锋标语

2014/06/25 职场文书

党员批评与自我批评发言

2014/10/02 职场文书

党员干部反四风民主生活会对照检查材料思想汇报

2014/10/12 职场文书

2015年法院工作总结范文

2015/04/28 职场文书

外出听课学习心得体会

2016/01/15 职场文书

2016年大学光棍节活动总结

2016/04/05 职场文书

门面租赁合同范文

2019/08/06 职场文书

MySQL查询日期时间

2022/05/15 MySQL