将光标定位于输入框最右侧实现代码
前端开发过程中,经常需要这样的场景。用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>
运行后效果如图,光标在深入框最右侧
相关推荐
-
jQuery 在光标定位的地方插入文字的插件
核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "insert":function(value){ //默认参数 value=$.extend({ "text":"123" },value); var dthis = $(this)[0]; //将jQuery对象转换为DOM元素 //IE下 if(document.selection){ $(dthis).focus(); //输入元素textara获取
-
通过上下左右键和回车键切换光标实现代码
做项目时,客户提出这样一个要求,在列表中的文本框里输入数据时,要能够通过上下左右键来切换光标,按回车键就把光标移到下一个文本框.这样就省得一直去用鼠标了,操作起来更方便. 不废话,上代码. 复制代码 代码如下: <asp:GridView id="gdv" runat="server" AllowPaging="True" PageSize="50" AutoGenerateColumns="False&quo
-
js实现在文本框光标处添加字符的方法介绍
复制代码 代码如下: <script language="javascript" type="text/javascript"> function Button4_onclick(obj) { obj.focus(); var rng=document.selection.createRange(); rng.setEndPoint("StartToStart",obj.createTextRange()); var eng=docu
-
JQuery在光标位置插入内容的实现代码
复制代码 代码如下: (function($){ $.fn.extend({ insertAtCaret: function(myValue){ var $t=$(this)[0]; if (document.selection) { this.focus(); sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if ($t.selectionStart || $t.selection
-
javascript textarea光标定位方法(兼容IE和FF)
今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的. 于是搜索了baidu,google,找到了 IE下面的方法 复制代码 代码如下: var tea=document.getElementById("文本框的ID"); var txt=textArea.crea
-
将光标定位于输入框最右侧实现代码
前端开发过程中,经常需要这样的场景.用JS实现将光标定位于输入框最右侧. 场景一:编辑图片的描述文字 场景二:Script.aculo.us的Ajax.InPlaceEditor类.双击可编辑,编辑后离开可自动更新该区域. 以上场景都需要JS实现将光标定位于输入框最右侧,却不是通过鼠标点入输入框内. 我们知道实现最基本的方法是HTMLElement的focus方法.如下 复制代码 代码如下: <p> <input type="text" value="hel
-
Vue实现输入框@功能的示例代码
目录 前言 成员列表 创建 使用 输入框 获取光标的坐标 保存光标 插入文本 运行结果 总结 前言 前几篇文章中分别介绍了如何实现聊天输入框的双向绑定.回车键发送.粘贴文本图片等功能,本着完善输入框的目的,文本重点介绍聊天框如何实现@功能. 文章回顾: Vue实现contenteditable元素双向绑定的方法详解 Vue实现输入框回车发送和粘贴文本与图片功能 首先需要先理清思路: 成员列表组件,需要根据光标的位置调整,点击成员项时回调成员信息 获取光标的位置坐标(x值,y值) 输入框失焦时记录
-
Angular动态添加、删除输入框并计算值实例代码
Angular动态添加.删除输入框并计算值实例代码 摘要: 在学习群中交流时,有人分享了一个动态添加输入框的方法,我在其基础上进行了一些改进 这个功能本身并不复杂,但还是要注意,每个ng-model的对象必须是不同的,这样才能把它们分隔开. 下面是完整代码: JS: angular.module("myApp",[]) .controller("inputController",function($scope){ $scope.items=[]; //初始化数组,以
-
基于Jquery实现仿百度百科右侧导航代码附源码下载
先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示 源码下载 代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候
-
Vue.js实现输入框绑定的实例代码
实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=
-
JS实现移动端实时监听输入框变化的实例代码
如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange
-
Bootstrap输入框组件简单实现代码
Bootstrap输入框组件的学习代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-s
-
Android仿微信输入框效果的实现代码
仿微信输入框效果图: 输入框: <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:background="@drawable/weixin_edit
-
微信小程序使用form表单获取输入框数据的实例代码
本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng
-
JS限制输入框输入的实现代码
1.文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 2.只能输入数字,能输小数点. 代码如下: <input onkeyup="if(isNaN(value))execCommand('undo')"
随机推荐
- 密码破解全教程
- access不能打开注册表关键字错误处理方法(80004005错误)
- ionic App 解决android端在真机上tab处于顶部的问题
- C++编程异常处理中try和throw以及catch语句的用法
- Python用Bottle轻量级框架进行Web开发
- Android 中构建快速可靠的 UI 测试
- js生成随机颜色方法代码分享(三种)
- IE6,IE7下js动态加载图片不显示错误
- Python中实现两个字典(dict)合并的方法
- python检测是文件还是目录的方法
- 浅谈C++11新引入的lambda表达式
- 视觉直观感受若干常用排序算法
- Nginx配置txt、pdf、doc、xls等文件直接下载的方法
- 用js调用迅雷下载代码的二种方法
- 什么是Node.js?Node.js详细介绍
- java取两个字符串的最大交集
- C语言函数的递归和调用实例分析
- Bootstrap警告(Alerts)的实现方法
- 简单实现Android闹钟程序 附源码
- PHP正在进行时-变量详解及字符串动态插入变量