js光标定位操作

更新日期: 2019-08-08 阅读: 3.6k 标签: 光标

1、打开网页后将光标定位到某个Text文本框中 

var alem= document.getElementById('txt_HeadLine');
alem.focus();


2、打开网页后Text文本框内已经有了从数据库里读出来的内容,需要将光标定位到这个Text某个字符后面,要将光标定位到冒号后面(不分中文或英文输入法),如果内容中没有冒号就就光标定位到最前面
要考虑到浏览器的兼容性 :

//页面加载完成触发此事件,将光标定位到第一个冒号(中英文)的后面
onload = function () {
    var alem = document.getElementById('txt_Title');
    alem.focus();
    var len = 0;
    if (alem.value.indexOf(":") != -1) {  //英文冒号
        len = alem.value.indexOf(":") + 1;
    }
    else if (alem.value.indexOf(":") != -1) {  //中文冒号
        len = alem.value.indexOf(":") + 1;
    }
 
    if (len == 0) {
        return;
    }
 
    if (alem.createTextRange) {  //IE浏览器     
        var sel = alem.createTextRange();
        sel.moveStart("character", len);
        sel.collapse();
        sel.select();
    } 
    else {           //非IE浏览器   包括mozilla,chrome,safari
        alem.selectionStart = len;
    }
};


3、选中一段文字 

alem.selectionStart = 3; //起始位置
alem.selectionEnd = 16; //结束位置


4、自动选中区域内容

<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动选择文本框/编辑框中的文字</title>
<script type="text/javascript">
    function Myselect_txt(){
        if (document.form1.title.focus){
        document.form1.title.select();}
    }
    function Myselect_txtarea(){
        if (document.form1.content.focus){
        document.form1.content.select();}
    }
</script>


<form name="form1">
    <input name="title" type="text" size="50" value="今日新闻头条" onClick="Myselect_txt()">
    <textarea name="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea>
 </form>

</html>


本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/5204

html5中contenteditable 光标_如何设置光标位置

在contenteditable 属性中,当点击该区域的时候,光标默认显示在区域内容最后一位,如果我们需要打开页面默认就出现,而且出现在第一个位置上,该如何实现呢?下面将给出js的实现方法。

js实现input输入框按回车键后光标跳到下一个输入框

在html页面中有多个input 输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框。

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状。在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找。

在textarea和input光标处插入内容,支持ie

项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效。直接上代码

html元素contenteditable属性如何定位光标和设置光标

废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整的DEMO代码,不用急,先去理解,才能做出更加好的输入体验。在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!