夏日博客

A-A+

js光标定位于输入框最右则代码

2016年01月13日 前端设计 暂无评论 阅读 5 views 次

我们在开发中常会为了提高用户体验来做一个最简单的操作,就是当用户有输入内容时等下次再移动到输入框果默认光标是在最左,我们要在最右侧接着输入,有需要的朋友不可错误哦,需要JS实现将光标定位于输入框最右侧，却不是通过鼠标点入输入框内。

我们知道实现最基本的方法是HTMLElement的focus方法,如下:

  1. <p>  
  2.  <input type="text" value="hello"/> </p>   
  3. <script>       
  4. var input = document.getElementsByTagName('input')[0];       
  5. input.focus();   
  6. </script>  

打开该页面会发现,光标位于输入框的最左侧,效果如下,而现在要实现的是将光标定位于输入框最右侧,需要三个步骤.

1，调用focus方法

2，value赋值为空

3，之前的input的值再赋给自己,代码如下:

  1. <input type="text" value="hello"/> </p>   
  2. <script>       
  3. var input = document.getElementsByTagName('input')[0];       
  4. var val = input.value;       
  5. input.focus();       
  6. input.value = '';       
  7. input.value = val;   
  8. </script>   

运行后效果如图，光标在深入框最右侧.

这个方法就是三步了，把先前的值保存到一个变量 然后把input清空，再把变量的值传给input这样就快速的实现的光标在最右则的方法了。

标签：

给我留言