zoukankan      html  css  js  c++  java
  • 将光标定位于输入框最右侧的实现方式

    前端开发过程中,经常需要这样的场景。用JS实现将光标定位于输入框最右侧。

     

    场景一:编辑图片的描述文字

    场景二:Script.aculo.us的Ajax.InPlaceEditor类。双击可编辑,编辑后离开可自动更新该区域

     

    以上场景都需要JS实现将光标定位于输入框最右侧,却不是通过鼠标点入输入框内。

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

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

     

    打开该页面会发现,光标位于输入框的最左侧。效果如下

    而现在要实现的是将光标定位于输入框最右侧,需要三个步骤。

    1. 调用focus方法
    2. value赋值为空
    3. 之前的input的值再赋给自己

    代码如下

    <p>
    	<input type="text" value="hello"/>
    </p>
    <script>
    	var input = document.getElementsByTagName('input')[0];
    	var val = input.value;
    	input.focus();
    	input.value = '';
    	input.value = val;
    </script>
    

    运行后效果如图,光标在输入框最右侧

      

  • 相关阅读:
    1216
    构建之法 1 2 3
    复利计算
    实验总结
    0916编译原理第二次上机作业
    0909第一次作业
    linux 更新jdk
    Java中使用OpenSSL生成的RSA公私钥进行数据加解密
    quartz定时任务时间表达式说明
    IntelliJ IDEA使用说明
  • 原文地址:https://www.cnblogs.com/snandy/p/2459071.html
Copyright © 2011-2022 走看看