首页 > 其他分享 >input输入框失去焦点时获取光标位置并插入内容

input输入框失去焦点时获取光标位置并插入内容

时间:2023-06-11 16:56:36浏览次数:24  
标签:content 输入框 cursorIndexStart messageForm input 光标

 

<el-input @blur="blur" :rows="5" v-model="messageForm.content" type="textarea" maxlength="100" show-word-limit placeholder="请输入你的留言"></el-input>

 

data() {
      return {
        cursorIndexStart: null,//光标选中开始的位置
        cursorIndexEnd: null,//光标选中结束的位置
      }
    },

 

      blur(e){
        this.cursorIndexStart = e.srcElement.selectionStart  // 获取input输入框失去焦点时光标选中开始的位置
        this.cursorIndexEnd = e.srcElement.selectionEnd  // 获取input输入框失去焦点时光标选中结束的位置
      },
    //在光标处插入数据 output(val) { if (this.cursorIndexStart !== null && this.messageForm.content) { //如果 文本域获取了焦点, 则在光标位置处插入对应字段内容 this.messageForm.content = this.messageForm.content.substring(0, this.cursorIndexStart) + val + this.messageForm.content.substring(this.cursorIndexEnd) } else { // 如果 文本域未获取焦点, 则在字符串末尾处插入对应字段内容 this.messageForm.content = this.messageForm.content?this.messageForm.content:'' + val } },

 

标签:content,输入框,cursorIndexStart,messageForm,input,光标
From: https://www.cnblogs.com/Ning-Blog/p/17473172.html

相关文章

  • ubuntu 手动安装Nvidia后黑屏左上角光标显示
    此解决方法适合Intel带核显CPU,也就是双CPU(Intel核显+Nvidia独显).解决办法是用Intel核显驱动,Nvidia只用来做计算,不适合用GPU专门做图形渲染目的.主要是因为Nvidia修改了Xorg窗口系统配置文件/etc/X11/xorg.conf,从安装Nvidia驱动前的Intel核显驱动改成了用Nvidia驱动。主要......
  • Cadence Allegro如何设置十字大光标?
       ......
  • select 多选回显的时候input高度问题
    select多选回显的时候input高度没撑开内容超出setTimeout(function(){if(document.querySelector('.el-cascader__tags')){document.querySelector('#el-cascader.el-input__inner').style.setProperty('height',`${document......
  • 微信小程序输入框光标错乱问题
     会出现这个问题,一般是受到了滚动条的影响,所以,在获取焦点时,需要关闭页面滚动,失去焦点时,就开启滚动,例如页面里存在scroll-view组件示例代码wxml片段<scroll-viewclass="m_scroll"style="height:100vh;"scroll-y="{{aFocus}}"scroll-with-animation></scroll-view><in......
  • 关于input( )和sys.stdin.readline( )的区别
    sys.stdin.readline()会将标准输入全部获取,包括末尾的'\n',input()会把‘\n’忽略sys.stdin.readline().strip() 去掉末尾的换行符, importsysa=sys.stdin.readline().strip()b=input()print(a,type(a))print(b,type(b))#678<class'str'>#678<clas......
  • input框记住密码之后样式取消
    input:-webkit-autofill{-webkit-text-fill-color:#fff!important;/*记住密码的字的颜色*/transition:background-color5000sease-in-out0s;/*延时渲染背景色来去除背景色*/caret-color:#fff;/*光标颜色*/}input:focus{/*外边框线去除*/outline:none;......
  • IO流 p9 转换流-InputStreamReader 和 OutputStreamWriter
    转换流-InputStreamReader和OutputStreamWriter介绍InputStreamReader:Reader的子类,可以将InputStream(字节流)包装成Reader(字符流);OutputStreamWriter:Writer的子类,实现将OutputStream(字节流)包装成Writer(字符流);当处理纯文本数据时,如果使用字符流效率更高,并且可以有效解决中文......
  • BootStrap_实现导入Excel(BootStrap-InputFile)【实例】
    BootStrap_实现导入Excel(BootStrap-InputFile)【实例】weixin_40877388于2020-03-3114:52:47发布分类专栏:BootStrap版权订阅专栏一、前言在批量加入学生信息的时候,我们通常采用Excel导入的方式,方便,快捷。本篇使用SpringBoot+BootStrap-InputFile+poi的结合方式,写......
  • p6 BufferedInputStream 和 BufferedOutputStream
    BufferedInputStream和BufferedOutputStreamBufferedInputStreamBufferedInputStream是字节流,在创建BufferedInputStream时,会创建一个内部缓冲区数组。构造方法摘要ConstructorandDescriptionBufferedInputStream(InputStreamin)创建一个BufferedInputStr......
  • fastadmin设置列表页快捷搜索输入框内的文字placeholder
     找到对应的列表js文件,在bootstrapTable初始化前增加这么一段代码:$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch']=function(){return"渠道名称或业务城市";}; 比如这里要搜索的是渠道名称或者业务城市,前提是数据表有这些字段,那么就......