首页 > 其他分享 >手动 focus 输入框后,如何将输入游标移动(定位)到输入框现有值的末尾

手动 focus 输入框后,如何将输入游标移动(定位)到输入框现有值的末尾

时间:2023-11-30 09:55:42浏览次数:29  
标签:const 游标 value focus 输入框 input

如果输入框内有值,直接使用HTMLInputElement自身的focus方法,会聚焦,但游标是处于默认的起始位置(如下图示例代码及图片):

const input = document.querySelector('._lng-input');
input.focus();

示例

 

处理方案 -- 兼容性好的Hack代码:

const input = document.querySelector('._lng-input');
const value = input.value;
input.value = '';
input.focus();
input.value = value;

// 思路比较简单,就是先聚焦,再赋值

效果图示:

最终效果

 

另一种处理方案是HTML5的Selection 方案,这里不做介绍(可以文心或者GPT)

 

标签:const,游标,value,focus,输入框,input
From: https://www.cnblogs.com/fanqshun/p/17866609.html

相关文章

  • 输入框、文本域中内容底部有红色波浪线,如何去掉?vue2 html
    取消检查就不会有红色波浪线添加属性:spellcheck="false"1<el-input2type="textarea"3:autosize="{minRows:2,maxRows:40}"4placeholder="请输入内容"5v-model.trim="text"......
  • wpf 封装 时间日期 双向绑定 输入框 控件
    简单封装一个时间日期输入框DateTimePicker.xaml<UserControlx:Class="FullApp5DateTimePicker.Modules.ModuleName.Views.DateTimePicker"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http......
  • 游标的使用
    目录一、游标定义二、游标分类2.1静态游标2.1.1.隐式游标:2.1.2.显式游标:2.1.3.游标变量:2.1.4.游标参数:2.2动态游标2.2.1强类型游标2.2.2弱类型游标2.2.3普通动态游标三、游标的优缺点优点:缺点:四、游标使用注意事项五、游标的作用一、游标定义游标即cursor,是......
  • 修改el-input el-select 默认hover focus样式
    :deep(.el-input){--el-input-text-color:#1e2230;--el-input-border:#1e2230;--el-input-hover-border:#1e2230;--el-input-focus-border:#1e2230;--el-input-transparent-border:0001pxtransparentinset;--el-input-border-color......
  • Windows7下ELectron应用的Input输入框在拼音输入中的失焦问题?
    Windows7下ELectron应用的Input输入框在拼音输入中的失焦问题主要是为了解决虚拟键盘(使用的simple-keyboard)的拼音输入问题(Windows自带的虚拟键盘因为不够方便和美观,所以没有采用;simple-keyboard其实也支持拼音输入,但是更不好用),最后决定通过Koffi(ffi,ffi-napi)调用user32.dll,模拟......
  • C#在ListView中使用按钮、输入框、进度条等控件
    usingJues.CustomListItemView;usingSystem;usingSystem.Collections.Generic;usingSystem.Windows.Forms;usingstaticSystem.Windows.Forms.ListViewItem;namespaceDemo{publicpartialclassForm1:Form{privateCustomControlcustomC......
  • MySQL变量,流程控制与游标
    变量,流程控制与游标1.变量在MySql数据库的存储过程和函数中,可以使用变量来存储查询或计算中间结果数据,和输出最终的结果数据。在MySql数据库中,变量分为系统变量以及用户自定义变量。1.1系统变量1.1.1系统变量分类变量由系统定义,不是用户定义,属于"服务器"层面。启动......
  • Unity InputField 输入框
    参数text:输入框中显示的文本内容。placeholder:输入框中未输入内容时显示的占位符文本。characterLimit:输入框中可输入的最大数字符限制。contentType:输入框中可输入的内容类型,如整数、小数、密码等。onValueChanged:输入框内容改变时触发的事件。 函数用常A......
  • Selenium4+python被单独定义<div>的动态输入框和二级下拉框要怎么定位?
    今天在做练习题的时候,发现几个问题捣鼓了好久,写下这篇来记录问题一:有层级的复选框无法定位到二级目录 对于这种拥有二级框的选项无法定位,也不是<select>属性.我们查看下HTML,发现它是被单独封装在body内拥有动态属性的独立<div>,当窗口点击的时候才会触发. 解......
  • element UI (input输入框clearable)不生效问题
    问题:el-input里自带了一个属性clearable,可以清楚输入框内容。但是有的时候清除无效,可能有如下情况:1.clear删除无效,可以绑定clear事件解决,@clear="handleClear";html:<el-form:label-position="labelPosition"label-width="100px":model="form"><el-form-i......