在网上看了很多用js在光标处插入文字的代码,很多都没有用,互抄而已,浪费时间。最近用到一个新方法,可以到达这个需求。IE支持document.selection,Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性。

代码如下:

01 function insertText(obj,str) {
02     if (document.selection) {
03         var sel = document.selection.createRange();
04         sel.text = str;
05     } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
06         var startPos = obj.selectionStart,
07             endPos = obj.selectionEnd,
08             cursorPos = startPos,
09             tmpStr = obj.value;
10         obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
11         cursorPos += str.length;
12         obj.selectionStart = obj.selectionEnd = cursorPos;
13     } else {
14         obj.value += str;
15     }
16 }
17 function moveEnd(obj){
18     obj.focus();
19     var len = obj.value.length;
20     if (document.selection) {
21         var sel = obj.createTextRange();
22         sel.moveStart('character',len);
23         sel.collapse();
24         sel.select();
25     } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
26         obj.selectionStart = obj.selectionEnd = len;
27     }
28 }

selectionStart和selectionEnd属性的更多相关文章

  1. Range对象理解,浏览器兼容性,获取鼠标光标位置

    一.关于浏览器的兼容性 目前主要有3种关于range的类似的对象,分别是W3C range 对象,Mozzlia selection ,ie TextRange 关于这三种的区别,请查看文档 http ...

  2. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

  3. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  4. 有趣的js获取input标签中光标的索引

    先看动图如下,我们就可以很清楚的知道获取input标签中光标的索引的意思了. 由于IE支持document.selection,Firefox,Chrome,Safari以及Opera都有select ...

  5. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

  6. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

  7. WPF进阶技巧和实战03-控件(4-基于范围的控件及日期控件)

    系列文章链接 WPF进阶技巧和实战01-小技巧 WPF进阶技巧和实战02-布局 WPF进阶技巧和实战03-控件(1-控件及内容控件) WPF进阶技巧和实战03-控件(2-特殊容器) WPF进阶技巧和实 ...

  8. WPF 10天修炼 第六天- 系统属性和常用控件

    WPF系统属性和常用控件 渐变的背景色 WPF中的前景色和背景色不同于传统Winform的设置,这些属性都是Brush类型的值.在XAML中,当为这些属性设置指定的颜色后将被转换为SolidColor ...

  9. FastClick 填坑及源码解析

    最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时,光标点击总是不好定位到正确的位置: 如上图,具体表现是较快点击时,光标总会跳到 textarea 内容的尾部.只 ...

随机推荐

  1. Redis未授权访问漏洞的利用及防护

    Redis未授权访问漏洞的利用及防护 什么是Redis未授权访问漏洞? Redis在默认情况下,会绑定在0.0.0.0:6379.如果没有采取相关的安全策略,比如添加防火墙规则.避免其他非信任来源IP ...

  2. 从源码的角度看 React JS 中批量更新 State 的策略(下)

    这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...

  3. Chrome F12调试

    F12 断点 F5 Esc 选择鼠标右击:编辑||hover样式 Sonrces go to file (ctrl+p) 搜搜文件名

  4. 2017-2018-2 1723《程序设计与数据结构》第八周作业 & 实验二 & 第一周结对编程 总结

    作业地址 第八周作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1847 (作业界面已评分,可随时查看,如果对自己的评分有意 ...

  5. <软件体系结构>实验框架选择及其说明

    一.框架选择 本次实验,我所采取的框架是SSH框架.那么首先,我想简单的说明一下SSH框架,一方面给自己复习一下知识,另一方面也能使自己在以后看这篇博客的时候不至于太费力. SSH不是一个框架,而是S ...

  6. 小学四则运算APP 第二阶段冲刺-第五天

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第二次冲刺阶段时间:11.29~12.09 本次发布的是判断题代码,已经实现部分功能,,但是美中不足的是判断错误 panduanset.j ...

  7. HTML DOM 学习笔记

    一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...

  8. ubuntu16安装MySQL

    MySQL 是一种开源数据库管理系统,通常作为流行的LAMP(Linux,Apache,MySQL,PHP / Python / Perl)堆栈的一部分安装.它使用关系数据库和SQL(结构化查询语言) ...

  9. ansible系列6-用户管理

    第一种:新增用户 ansible host -m user -a "name=zhang shell=/bin/bash groups=admin,root append=yes home= ...

  10. python成长之路八 -- 内置函数

    1,python内置函数     内置函数     abs() dict() help() min() setattr() all()  dir()  hex() next()  slice()  a ...