首页 > 其他分享 >js聚焦并将光标定位到输入框和可编辑DIV的最后

js聚焦并将光标定位到输入框和可编辑DIV的最后

时间:2023-10-28 15:33:10浏览次数:34  
标签:dom focus js 输入框 range let DIV 光标

          // 聚焦并将光标定位的文本末尾  ---  div
          // let dom = $('.demonstrate-li-input').eq(i).focus()
          // let range = document.createRange() //创建一个新的范围对象
          // let sel = window.getSelection() //获取当前选区对象
          // range.selectNodeContents(dom[0]) //将范围设置为元素的所有子节点
          // range.collapse(false) // 将范围折叠到末尾位置
          // sel.removeAllRanges() //清除当前选区的所有范围
          // sel.addRange(range) //将新的范围添加到选区中
          // dom.focus() //将焦点设置到该元素上
          // dom.css({
          //   'border-bottom': '1px dashed #D8D8D8'
          // })
          // input输入框
          setTimeout(() => {
            let dom = $('.demonstrate-li-input').eq(i)
            dom.focus() //将焦点设置到该元素上
            dom.css({
              'border-bottom': '1px dashed #D8D8D8'
            })
            let len = dom[0].value.length // 获取当前文本长度
            dom[0].setSelectionRange(len, len) // 将光标定位到文本末尾
          }, 1)

标签:dom,focus,js,输入框,range,let,DIV,光标
From: https://www.cnblogs.com/HatcherBlogs/p/17794126.html

相关文章

  • 动态金额 jsonArray 计算
    动态金额jsonArray计算数据格式[{"name":"福利卡券","type":"WELFARE_CARD_COUPON","useNum":0.01},{"name":"现金","type":"CASH","useNum":12.26}]相加/***cos......
  • Vue.js框架:vue3引入mockjs模拟数据调试
    一、引入依赖1、安装依赖包在终端中使用以下命令:npminstall@types/mockjs--save此处使用了@types进行引入,是因为在.ts文件引用包时,默认必须有类型声明,不能是any。有很多依赖包是用纯JS写的,没有类型声明。因此使用@types作为类型声明的集......
  • 用HashMap创建jString,ArrayList的键值对用entrySet遍历
    用HashMap创建jString,ArrayList的键值对用entrySet遍历package随机点名器;importjava.util.*;publicclassTest1{publicstaticvoidmain(String[]args){HashMap<String,ArrayList<String>>m=newHashMap<>();ArrayList<String>......
  • 用友GRP-U8 license_check.jsp sql注入漏洞
    漏洞描述用友GRP-U8license_check.jsp存在sql注入,攻击者可利用该漏洞执行任意SQL语句,如查询数据、下载数据、写入webshell、执行系统命令以及绕过登录限制等。漏洞复现fofa语法:app="用友-GRP-U8"登录页面如下:POC:/u8qx/license_check.jsp?kjnd=1%27;WAITFOR%20DELAY%20%2......
  • 用友U8-Cloud upload.jsp 任意文件上传漏洞
    漏洞简介U8cloud聚焦成长型、创新型企业的云ERP,基于全新的企业互联网应用设计理念,为企业提供集人财物客、产供销于一体的云ERP整体解决方案,全面支持多组织业务协同、智能财务,人力服务、构建产业链智造平台,融合用友云服务实现企业互联网资源连接、共享、协同。该系统upload.......
  • Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\cache\
    使用下面命令创建react项目爆出的错误npxcreate-react-appreact-basic显示nodejs里面的文件权限不够,需要进行文件夹的权限更改,改为完全控制就可以了。 ......
  • js给一段话,遇到的第一个括号处加上换行符
    list.forEach((item,index0)=>{constproductName=item.name;constindex=productName.indexOf('(');if(index==-1){returnproductName;}constbefore=productName.......
  • json 对象属性的输出顺序测试,fastJson 有序,jackson,gson无序(需代码中人工按约定来编码
    json对象属性的输出顺序测试,fastJson有序,jackson,gson无序(需代码中人工按约定来编码)接口数据签名规则fastJson会根据对象的字段的首字母来排序。而jackson,gson是根据对象的类中定义的属性的代码中的先后顺序输出。不会排序。针对业务场景需要对接口中对象存在集合列表等,需要......
  • BPMNJS最简单使用
    <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/><metahttp-equiv=&quo......
  • p5.js 到底怎么设置背景图?
    本文简介点赞+关注+收藏=学会了在《p5.js光速入门》里我们学过加载图片元素,学过过背景色的用法,但当时没提到背景图要怎么使用。本文就把背景图这部分内容补充完整,并且会提到在p5.js里使用背景图的一些注意点。背景图的用法在p5.js里使用背景图只需做以下几步......