JS将光标移动到文本框后面

最新推荐文章于 2019-07-27 16:02:32 发布
最新推荐文章于 2019-07-27 16:02:32 发布
阅读量234 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/caihuashun/p/3896039.html
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        onload = function () {
            //tb代表id为u的文本框
            var tb = document.getElementById("u");
            //获取文本框的长度
            var leng = tb.value.length;
            //选择起始位置 = 当前长度
            tb.selectionStart = leng;
        }
    </script>
</head>
<body>
    <input type="text" id="u" value="测试看看能不能到后面" />
</body>
</html>

 

转载于:https://www.cnblogs.com/caihuashun/p/3896039.html

weixin_30486037
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现将一个文本框的值移动到另一个文本框
翩跹星子的博客
12-28 3593
实现效果： 代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;hea...
js 光标移动到输入框最后位置函数
weixin_30416871的博客
04-02 311
仅限标记作用，方便以后使用。 function toEnd (obj){ // var obj = event.srcElement ? event.srcElement : event.target; if (obj.createTextRange) {//IE浏览器 var range = obj.createTextRange(); ...
js将光标自动定位到文本框
心若动、泪千行
07-19 9908
document.getElementById("Text1").focus();//光标自动定位到当前文本框
JS光标定位到文本框字符串末尾
web前端开发-linglong
10-20 8259
在开发网站表单的时候，为了给用户良好的体验度，在验证表单数据的时候，我们会先使用JavaScript来进行表单数据的验证，如果用户输入的数据不对，我们就可以马上给出提示信息。为了更进一步给用户良好的体验感，比如用户在几个文本框内输入了数据，提交的时候，某个文本框内的数据不对，我们在提示哪项数据不符的情况下，再把光标定位到该项文本框内。我们在这么做的时候，会发现一个问题，就是光标位置的问题，光标虽然
javascript获得光标所在的文本框(text/textarea)中的位置
10-29
标题和描述提到的`js 光标 文本框`，就是指通过JavaScript实现对文本输入光标的定位和获取。下面将详细介绍这个功能的实现方式以及相关知识点。 在非IE浏览器中，如Firefox、Chrome等，我们可以使用`selectionStart...
javascript设置文本框光标的方法实例小结
10-21
这个函数接收文本框的ID和目标位置作为参数，创建一个文本范围，使其折叠到起始位置，然后移动开始位置到指定字符数，最后选中这个范围，即设置了光标位置。 这些函数在JavaScript中非常实用，特别是在需要在用户...
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
10-27
`moveEnd`函数首先聚焦`<textarea>`，然后根据浏览器类型，使用相应的API将光标移动到文本末尾。 为了实际应用这些功能，你可以创建两个按钮，分别调用`insertText`和`moveEnd`函数，如下所示： ```html ...
js获取光标位置和设置文本框光标位置示例代码
10-26
在JavaScript中，获取和设置文本框（input[type="text"]）或文本域（textarea）的光标位置是一项常见的任务，特别是在实现用户交互功能时。在不同的浏览器中，处理光标位置的方法有所不同，主要分为IE浏览器和其他非...
JavaScript自定义文本框光标
12-11
文本框（input或textarea）的光标无法修改样式（除了通过color修改光标颜色）。但笔者希望个人创建自己的网站时，文本框的光标有属于自己的风格。所以，尝试模拟文本框的光标，设计有自己风格的光标。以下是笔者个人...
表单文本框光标自动移动到下一个文本框内
weixin_30568591的博客
07-27 412
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jstest</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="...
JS实现在一个输入框按回车键后光标跳到下一个输入框
生如夏花S的博客
01-16 9680
&lt;body&gt; &lt;el-input class="codeInput1 codeInput" autofocus maxlength="4" oninput=" focusNextInput(this);" &gt; &lt;el-input class="codeInput2 codeInput" maxlength="4&quot
WinForm中实现按Enter将光标移动到下一个文本框
weixin_33701564的博客
07-11 932
首先窗体加载出来是上面这个样子。有五个文本框，我们要实现的功能就是输入姓名后按Enter，使光标直接定位到手机号中。 在页面加载的时候我们就要获取所有文本框控件，并添加回车事件 private void Form1_Load(object sender, EventArgs e){ textBox1.Focus(); foreach (C...
js 将光标移动到文本末尾
weixin_33896726的博客
07-10 1031
为什么80%的码农都做不了架构师？>>> ...
文本框 获取焦点 光标移动到文本框文本尾部方法
weixin_34351321的博客
11-12 525
方法一：取值复制 var content = $(#id).val();$(#id).val("").focus().val(ct); 方法二： var objevent = $(#id)[0]; var values = $(#id).val().length; if (window.getSe...
js定位光标到输入框指定位置
yongyonglsy的专栏
06-13 2063
在提供友好用户界面时，常常要定位光标到输入框的指定位置。通常是尾部，好让用户接着输入信息。我们可以用javascript操作dom来实现，以下是实现的方法 1. functionchangeCursor(input,position){ 2. varrange=input.createTextRange(); 3. range.collapse(true); 4. range.mo...
js 设置光标到文本末尾
拿着键盘走天涯的博客
02-20 1599
在特殊情况下,获取光标并把光标设置到文本末尾 复制可用 // 设置光标到文本最后 function set_sursor() { el = document.getElementById('id'); //el=el[0]; //jquery 对象转dom对象 el.focus(); if ($.support.msie) { var range ...
Js移动input框的光标至末尾
weixin_41988301的博客
10-23 5211
//input框输入全国组织机构代码自动加-作为分割线     me.addLine = function() {         var text = $("#IdentNo").val();         text = text.replace(/-/g, "");     //    $("#IdentNo").val(text);         if (text.length &gt;...
vue表格点击变成输入框，光标移动输入框变文本框
最新发布
05-09
可以使用 Vue.js 的指令 `v-if` 和 `v-show` 结合使用来实现这个功能。 首先，在表格中添加一个输入框，并给它一个 `v-show` 指令。这样一开始它是隐藏的，只有当用户点击某一行时，才会显示出来。 然后，在单元格上添加一个点击事件，当单元格被点击时，将输入框显示出来，并将光标自动聚焦到输入框中。这可以通过在单元格上添加 `@click` 事件来实现。 最后，当用户从输入框移开时，将输入框隐藏，并将输入框中的值显示在表格中。这可以在输入框上添加 `@blur` 事件来实现。 以下是示例代码： ```html <template> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="index"> <td @click="edit(index)">{{editingIndex === index ? '' : item.name}}</td> <td v-show="editingIndex === index"> <input type="text" v-model="list[index].name" @blur="save(index)" ref="input" /> </td> <td>{{item.age}}</td> </tr> </tbody> </table> </template> <script> export default { data() { return { list: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }, ], editingIndex: -1, } }, methods: { edit(index) { this.editingIndex = index this.$nextTick(() => { this.$refs.input.focus() }) }, save(index) { this.editingIndex = -1 }, }, } </script> ``` 在这个示例中，我们使用 `editingIndex` 变量来记录当前正在编辑的行的索引。当用户点击某一行时，我们将 `editingIndex` 设置为该行的索引，并将输入框显示出来。当用户从输入框移开时，我们将 `editingIndex` 设置为 -1，将输入框隐藏，并将输入框中的值保存到数据中。在 `edit` 方法中，我们使用 `this.$nextTick` 来确保在输入框显示出来后再将光标聚焦到输入框中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值