热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery在光标定位的地方插入文字的插件

jQuery在光标定位的地方插入文字的插件的实现代码,通过获取光标位置,然后插入文字
核心代码:
代码如下:

(function($){
$.fn.extend({
"insert":function(value){
//默认参数
value=$.extend({
"text":"123"
},value);
var dthis = $(this)[0]; //将jQuery对象转换为DOM元素
//IE下
if(document.selection){
$(dthis).focus(); //输入元素textara获取焦点
var fus = document.selection.createRange();//获取光标位置
fus.text = value.text; //在光标位置插入值
$(dthis).focus(); ///输入元素textara获取焦点
}
//火狐下标准
else if(dthis.selectionStart || dthis.selectiOnStart== '0'){
var start = dthis.selectionStart;    //获取焦点前坐标
var end =dthis.selectionEnd;   //获取焦点后坐标
    //以下这句,应该是在焦点之前,和焦点之后的位置,中间插入我们传入的值 .然后把这个得到的新值,赋给文本框
      dthis.value = dthis.value.substring(0, start) + value.text + dthis.value.substring(end, dthis.value.length); }
    //在输入元素textara没有定位光标的情况
      else{
          this.value += value.text; this.focus();
      };
      return $(this);
    }
  })
})(jQuery)

主要思路:
  当点击某个元素的时候,让一个输入框,插入指定的值。?
  1.当点击某个元素的时候,应该让输入框获取焦点,因为只有获得了焦点,才能在里面输入值;
  IE下:document.selection.createRange()
  FF下:var start = dthis.selectionStart;    //获取焦点前坐标
     var end =dthis.selectionEnd;    //获取焦点后坐标
  2.获取当前输入框焦点的位置
  3.将值插入到输入框焦点的位置;
  4.再次获取焦点;保证光标在输入框内 
在线演示: http://demo.jb51.net/js/2012/myfocustext/
打包下载: https://www.jb51.net/jiaoben/44153.html
推荐阅读
  • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
  • 本文详细介绍了在PHP中如何获取和处理HTTP头部信息,包括通过cURL获取请求头信息、使用header函数发送响应头以及获取客户端HTTP头部的方法。同时,还探讨了PHP中$_SERVER变量的使用,以获取客户端和服务器的相关信息。 ... [详细]
  • 使用jQuery与百度地图API实现地址转经纬度功能
    本文详细介绍了如何利用jQuery和百度地图API将地址转换为经纬度,包括申请API密钥、页面构建及核心代码实现。 ... [详细]
  • 正则表达式入门指南
    本文基于《正则表达式必知必会》(作者:Ben Forta,译者:杨涛),介绍了正则表达式的基本概念及其应用,包括搜索与替换功能,以及元字符的分类与使用。 ... [详细]
  • 使用 ModelAttribute 实现页面数据自动填充
    本文介绍了如何利用 Spring MVC 中的 ModelAttribute 注解,在页面跳转后自动填充表单数据。主要探讨了两种实现方法及其背后的原理。 ... [详细]
  • 我在尝试将组合框转换为具有自动完成功能时遇到了一个问题,即页面上的列表框也被转换成了自动完成下拉框,而不是保持原有的多选列表框形式。 ... [详细]
  • 本文详细介绍了Socket在Linux内核中的实现机制,包括基本的Socket结构、协议操作集以及不同协议下的具体实现。通过这些内容,读者可以更好地理解Socket的工作原理。 ... [详细]
  • HDU 2537 键盘输入处理
    题目描述了一个名叫Pirates的男孩想要开发一款键盘输入软件,遇到了大小写字母判断的问题。本文提供了该问题的解决方案及实现方法。 ... [详细]
  • 2023年1月28日网络安全热点
    涵盖最新的网络安全动态,包括OpenSSH和WordPress的安全更新、VirtualBox提权漏洞、以及谷歌推出的新证书验证机制等内容。 ... [详细]
  • 利用Docker部署JupyterHub以支持Python协同开发
    本文介绍了如何通过Docker容器化技术安装和配置JupyterHub,以实现多用户的Python开发环境,特别适合团队协作场景。 ... [详细]
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • 本文详细介绍了如何在PHP中使用Memcached进行数据缓存,包括服务器连接、数据操作、高级功能等。 ... [详细]
  • ACM经典书籍推荐
    本文介绍了几本在算法和计算机科学领域具有重要影响力的书籍,包括由Donald E. Knuth编著的《计算机程序设计艺术》第一卷,以及潘氏兄弟的数论经典教材等。这些书籍不仅是学习相关领域的宝贵资源,也是专业人士不可或缺的参考书。 ... [详细]
  • 本文介绍了如何利用 Apache NiFi 的灵活性和扩展性,通过自定义组件来解决标准组件无法满足的特定业务需求。文章不仅涵盖了自定义处理器的基本步骤,还讨论了调试自定义组件时可能遇到的问题及解决方案。 ... [详细]
  • 在学习了Splay树的基本查找功能后,可能会觉得它与普通的二叉查找树没有太大的区别,仅仅是通过splay操作减少了时间开销。然而,Splay树之所以被誉为“序列之王”,主要在于其强大的区间操作能力。 ... [详细]
author-avatar
手机用户2602916141
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有