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

解析window.open的使用方法总结

Jun 19 Javascript

Javascript玩转继承（二）

May 08 Javascript

比例尺、缩略图、平移缩放之百度地图添加控件方法

Aug 03 Javascript

jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题

Apr 04 jQuery

使用bootstrap插件实现模态框效果

May 10 Javascript

zTree异步加载展开第一级节点的实现方法

Sep 05 Javascript

form表单数据封装成json格式并提交给服务器的实现方法

Dec 14 Javascript

Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

Aug 09 jQuery

微信小程序之事件交互操作实例分析

Dec 03 Javascript

Node.js assert断言原理与用法分析

Jan 04 Javascript

react组件从搭建脚手架到在npm发布的步骤实现

Jan 09 Javascript

Vue路由之JWT身份认证的实现方法

Aug 26 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

php数组应用之比较两个时间的相减排序

2008/08/18 PHP

PHP var_dump遍历对象属性的函数与应用代码

2010/06/04 PHP

Zend Framework使用Zend_Loader组件动态加载文件和类用法详解

2016/12/09 PHP

ThinkPHP3.2框架操作Redis的方法分析

2019/05/05 PHP

javascript 正则替换 replace(regExp, function)用法

2010/05/22 Javascript

js将控件隐藏及display属性的使用介绍

2013/12/30 Javascript

JS OffsetParent属性深入解析

2014/01/13 Javascript

JS中setTimeout的巧妙用法前端函数节流

2016/03/24 Javascript

[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】

2016/11/01 Javascript

关于javascript事件响应的基础语法总结(必看篇)

2016/12/26 Javascript

js实现简单的网页换肤效果

2017/01/18 Javascript

BootStrap中的Fontawesome 图标

2017/05/25 Javascript

Node.js中多进程模块Cluster的介绍与使用

2017/05/27 Javascript

Vuex利用state保存新闻数据实例

2017/06/28 Javascript

JS运动特效之链式运动分析

2018/01/24 Javascript

浅谈vuejs实现数据驱动视图原理

2018/02/23 Javascript

vue在手机中通过本机IP地址访问webApp的方法

2018/08/15 Javascript

Vue数据绑定简析小结

2019/05/07 Javascript

layer.open组件获取弹出层页面变量、函数的实例

2019/09/25 Javascript

Python压缩和解压缩zip文件

2015/02/14 Python

Python用GET方法上传文件

2015/03/10 Python

Python字符串中查找子串小技巧

2015/04/10 Python

对于Python中RawString的理解介绍

2016/07/07 Python

python3实现163邮箱SMTP发送邮件

2018/05/22 Python

使用python采集脚本之家电子书资源并自动下载到本地的实例脚本

2018/10/23 Python

Python基于百度云文字识别API

2018/12/13 Python

pandas的相关系数与协方差实例

2019/12/27 Python

HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

2021/01/19 HTML / CSS

城市规划毕业生求职信

2013/10/10 职场文书

汽车运用工程专业求职信

2014/06/18 职场文书

2014普法依法治理工作总结

2014/12/18 职场文书

我们的节日元宵节活动总结

2015/02/06 职场文书

导游词之云南-元阳梯田

2019/10/08 职场文书

Nginx 过滤静态资源文件的访问日志的实现

2021/03/31 Servers

搭建Yolov5服务器

2022/04/30 Servers

MySQL使用IF语句及用case语句对条件并结果进行判断

2022/09/23 MySQL