显示输入框时光标自动定位到输入框内容的最后

最新推荐文章于 2022-07-26 09:25:26 发布
最新推荐文章于 2022-07-26 09:25:26 发布
阅读量2.3k 收藏 1
点赞数
文章标签： javascript c# java ViewUI
原文链接：http://www.cnblogs.com/yy95/p/9997448.html
版权
本文介绍如何利用JavaScript实现点击按钮时，光标自动定位到输入框内容的最后，并确保内容显示也滚动到最后。通过input元素的setSelectionRange方法和autofocus属性，结合onfocus事件来实现此功能。在Chrome浏览器中，可能需要调用两次setSelectionRange才能达到预期效果。
摘要由CSDN通过智能技术生成

思路就是利用input元素中的setSelectionRange方法

setSelectionRange(posstart,posend)用来选中被focus的输入框的特定范围.

开始位置和结束位置设置为内容的总长度，光标就会定位到内容最右边。

    <body>
        <input id="textarea-1" onfocus="setCss(this)" type="text" name="" value
最低0.47元/天 解锁文章
weixin_33749242
关注
uniapp - 手动设置 input / textare 输入框焦点并将光标移到末尾，也支持 uview 组件库 u-input 输入框 / u-textarea 文本域（全平台兼容的通用解决方案）
王佳斌
07-21 5859
uniapp小程序h5网页安卓苹果app设置input输入框textare多行输入框的焦点，uniapp设置输入框input焦点，uniapp手动实现让input文本框聚焦，uniapp如何让输入框input手动聚焦，uni-app输入框手动设置焦点，input手动获取焦点，uniapp input自动聚焦，uniapp每次手动让input输入框获取焦点，uniapp自动获取焦点并将光标移到末尾，uniapp 给textarea多行文本框设置获取焦点，uniapp获取输入框焦点后怎么把光标移到最后，unia
光标定位到输入框文本的尾端
csscnu的专栏
09-06 1118
function movePoint()    {     var aa= document.getElementById("aa");     aa.focus();     var len = aa.value.length;         var rng = aa.createTextRange();     //创建文本域     rng.moveStart("char
input光标总是在内容最末端
Justicky
01-08 6731
前端在优化用户体验的时候，经常会遇到这样的需求： 当input框有值的时候，用户再去编辑这个input，无论用户点input的什么位置，总是将光标置于input已有内容的最末端。 下例是基于vue框架的写法： &lt;input type="text" @click="focusEnd('name-inp-hook')" class="name-inp" id="name-inp-hook...
winform 中，以编程方式将光标定位到文本框的最后并将滚动条滚动到该位置
weixin_33888907的博客
04-09 181
一个更方便更简洁的操作是：  textBoxMSG.AppendText(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff") + "：" + msg + "\r\n"); ///////////////////////////////////////////////////////////////////////////////////////////...
打开页面时光标自动定位输入框
Strive279的博客
10-28 1035
第一种方法 <script> function focusit() { document.all("你想定位的对象名字").focus(); } </script> <body onload="focusit()"></body> 第二种方法 <body onload="document.testform.textinput.focus()"> <form name="testform"
JS将光标聚焦在文本最后的实现代码
12-04
代码如下: <span xss=removed>[removed] //将光标聚焦在文本最后 function cursorEnd(){ var e = event.srcElement; var r = e.createTextRange(); r.moveStart(‘character’,e.value.length); r.collapse(true); r.select(); } [removed] <input type=text name=”test” va
输入框四位分割加空格
06-01
同时，描述中提到的“解决在空格位置点击输入光标错，或者删除时光标错位问题”是这个功能实现中需要特别关注的细节，确保用户在空格处进行输入或删除操作时，光标能正确地定位。 在JavaScript中，我们可以通过监听...
JS调整输入框光标位置
前端之路修远兮
01-04 6084
在移动端开发过程中，由于触摸事件的影响，时常会出现光标错位，给用户带来不好的体验。本文举例说明将光标在聚焦文本框的同时将光标移动到文本末端。 将光标移动到文字的末尾： function moveEnd(obj){/*绑定在onfocus事件上*/ obj.focus(); var len = obj.value.length; if (document.selectio
html页面自动输入数字,js input框输入1位数字后自动跳到下一个input框聚焦
weixin_42501298的博客
06-10 1765
// input框输入1位数字后自动跳到下一个input聚焦function goNextInput(el){var txts = document.querySelectorAll(el);for(var i = 0; ivar t = txts[i];t.index = i;t.setAttribute("readonly", true);t.onkeyup=function(){this.v...
input框光标设置为最末尾的方法
05-01 8307
当我们在开发过程中，遇到要通过js给input框设置初始值时，在ios会出现，当input框通过点击触发聚焦的时候（input聚焦在ios中是无法通过js进行聚焦实现的），会发现光标还停留在设置内容之前，这是用户需要再次点击末尾处才能将光标置于内容的末尾，这样造成用户体验较差，为了解决这个问题，我们需要在input框第一次需要实现聚焦的时候，手动将光标置于内容的后面，实现如下：在service中实
密码切换显示和隐藏 并且保证切换时候EditText显示在最后一行
zhouxin1233的博客
06-13 537
mEye.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (isHidden){//当前状态不可见 //设置密码可见
Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）
weixin_55966654的博客
08-24 8475
一、知识点： 带 icon 的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。 因为图标涉及点击事件，带 icon 的输入框，采用的是 slot 方式。 slot=“suffix” 表示，图标会出现在input 的尾部； 二、实现思路 要变化的有，图标样式和input的显示方式 定义一个flag默认false，绑定input 的type值，flag为true时，type为 text 类型（可以看见数
VUE前端实现密码输入的显示和隐藏
wujize的博客
04-16 8911
VUE前端实现密码输入的显示和隐藏 在用户前端登录时，密码输入框右边增加一个“眼睛”图标，实现用户输入密码的是显示星号还是字符，可以方便用户在输入复杂密码是确认，是一个比较符合用户使用习惯的非功能性设计。 一、准备图标 准备两个“眼睛”图标，第一个是闭上的，代表不显示密码，密码输入显示为*。SVG图标如下： <svg width="128" height="64" xmlns="http:...
input光标位置设置至行末端
Shuanger112的博客
08-15 7523
最近接到了一个很尬的需求.. 这个需求是这样的… 再点击input框的时候光标要始终保持在内容的行末端 emm.. 废话少说，直接上代码！ Js： end: function (item) { var obj = document.getElementsByClassName(item)[0] obj.focus(); var len = obj.value.len...
密码输入框的显示与隐藏
weixin_34025051的博客
02-22 1570
密码的显示与隐藏 只需切换type 为text，或者password。 html <li class="aui-list-item"> <div class="aui-list-item-inner"> <div class=" iphoe-pic suo-pic">&lt...
将光标放在输入的末尾
liuhao9999的博客
07-26 721
假设我们有一个代表用户全名的文本字段。还有一个用于更新全名的。
解决富文本编辑器wangeditor 光标跳动的问题
weixin_50606255的博客
12-23 3307
为什么会出现光标总是跳动到末尾的情况？？ 通常我们会将编辑器封装为一个组件来使用，编辑的内容就是通过父组件传递给子组件，每次编辑父组件中的内容都会触发子组件(编译器)中的onchange事件，子组件再将新的改变后的值传递给父组件，父组件一接收到值光标就会自动跳转到内容末尾。 如何解决这种问题？？ 源头就是要解决onchange事件改变内容的时机，不能一在父组件写东西就触发，或者是触发之后在我们需要更新后的内容时再传递给父组件。 即在onchange事件中添加判断条件 以下代码的修改和添加都在这个示
VUE 移动端处理input光标定位在最后的问题（简单版）
爱吃牛肉的政
05-21 8515
在Vue中 使用JS调整input光标位置，让他保持在最后 在调试移动端的时候，由于触摸事件，光标有时候会错位，所以导致有需求需要控制js光标的位置，要么在前要么在后，在查了相关的资料后，发现其实很简单，就几行代码能实行，并且兼容多种浏览器。 <input placeholder="str" type="number" v-model="model" @focus="End($event)" /> methods
element-ui select 获取焦点时，光标移到文字最后
热门推荐
weixin_33672400的博客
04-25 1万+
背景：element-ui select 可搜索组件 默认 focus 的时候，会呈现选中状态，怎么才能取消选中 状态，让光标停留在文字最后？默认效果：目标效果：代码如下：<el-select v-model="value" filterable placeholder="请选择" @click.native="change" id="select"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值