jquery在输入框光标处插入字符串

关于jquery在输入框光标处插入字符串以下文字资料是由3搜网小编为大家搜集整理后发布的内容，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jquery在输入框光标处插入字符串”文章吧。

需求描述

我想实现，点击按钮，在输入框光标处插入字符串。

解决方法

扩展 JQuery ，在光标所在位置插入指定字符，添加下面 js 在页面中。

<script type="text/javascript" src="/static/index/js/jquery-1.9.1.min.js"></script>

// JavaScript Document
(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;
        var top = dthis.scrollTop;
        
        //以下这句，应该是在焦点之前，和焦点之后的位置，中间插入我们传入的值
        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)

首先获取 input 输入框对象，然后使用 insertAtCaret 方法在光标位置插入字符串。

$(".strong").click(function(){
    $(".layui-textarea").insert({"text":"456"});
});

以上就是关于“jquery在输入框光标处插入字符串”这篇文章的内容，希望分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注3搜网技术频道。