js 光标选中 操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<textarea name="" id="edit" cols="100" rows="10"></textarea>
<button onclick="getPos()">获取光标位置</button>
<button onclick="getSelect()">获取选中内容</button>
<button onclick="insert()">插入文本</button>
<script>
$.extend($.fn,{
//获取文本框内光标位置
getSelectionStart: function() {
var e = this[0];
if (e.selectionStart) {
return e.selectionStart;
} else if (document.selection) {
e.focus();
var r=document.selection.createRange();
var sr = r.duplicate();
sr.moveToElementText(e);
sr.setEndPoint('EndToEnd', r);
return sr.text.length - r.text.length;
} return 0;
},
getSelectionEnd: function() {
var e = this[0];
if (e.selectionEnd) {
return e.selectionEnd;
} else if (document.selection) {
e.focus();
var r=document.selection.createRange();
var sr = r.duplicate();
sr.moveToElementText(e);
sr.setEndPoint('EndToEnd', r);
return sr.text.length;
}
return 0;
},
//自动插入默认字符串
insertString: function(str) {
$(this).each(function() {
var tb = $(this);
tb.focus();
if (document.selection){
var r = document.selection.createRange();
document.selection.empty();
r.text = str;
r.collapse();
r.select();
} else {
var newstart = tb.get(0).selectionStart+str.length;
tb.val(tb.val().substr(0,tb.get(0).selectionStart) +
str + tb.val().substring(tb.get(0).selectionEnd));
tb.get(0).selectionStart = newstart;
tb.get(0).selectionEnd = newstart;
}
}); return this;
},
setSelection: function(startIndex,len) {
$(this).each(function(){
if (this.setSelectionRange){
this.setSelectionRange(startIndex, startIndex + len);
} else if (document.selection) {
var range = this.createTextRange();
range.collapse(true);
range.moveStart('character', startIndex);
range.moveEnd('character', len);
range.select();
} else {
this.selectionStart = startIndex;
this.selectionEnd = startIndex + len;
}
}); return this;
},
getSelection: function() {
var elem = this[0]; var sel = '';
if (document.selection){
var r = document.selection.createRange();
document.selection.empty();
sel = r.text;
} else {
var start = elem.selectionStart;
var end = elem.selectionEnd;
var content = $(elem).is(':input') ? $(elem).val() : $(elem).text();
sel = content.substring(start, end);
}
return sel;
}
})
</script>
<script>
function getPos(){
alert($("#edit").getSelectionStart());
}
function getSelect(){
alert($("#edit").getSelection());
}
function insert(){
$("#edit").insertString("hello"); }
</script>
</body>
</html>
js 光标选中 操作的更多相关文章
- js光标定位操作
1. 自动选中区域内容 <html> <meta http-equiv="Content-Type" content="text/html; chars ...
- 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、
```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
- nw.js如何处理拖放操作
nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了. 首先我们看一下一个正常的页面,直接拖放 ...
- Numeral.js – 格式化和操作数字的 JavaScript 库
Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...
- 【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程
JS改写系列教程: 1.MD5加密改写教程(爱拍网登录)2.解密如何快速找到真确的js加密算法3.多重MD5加密改写教程(5173登录)4.DZ论坛登录加密改写5.唯品会手机登录加密改写6.新浪微博密 ...
- JS实现 键盘操作
JS实现 键盘操作: 详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice <!DOCTYPE html PUBLIC "-//W3C// ...
- js中如何操作json数据
一.要想熟练的操作json数据,就先要了解json数据的结构,json有两种结构:对象和数组. 1.对象 一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”:“‘名称/值’ 对”之间使用“, ...
- js数组的操作及数组与字符串的相互转化
数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...
随机推荐
- python中读取json文件报错,TypeError:the Json object must be str, bytes or bytearray,not ‘TextIOWrapper’
利用python中的json读取json文件时,因为错误使用了相应的方法导致报错:TypeError:the Json object must be str, bytes or bytearray,n ...
- 一次因为文件名开头包含空格而导致FTP文件一直无法下载的悲剧!
最近负责公司研究新的多渠道打包方案,之前的打包方案太慢了,因此采用了美团的Android Signature V2 Scheme签名下的新一代渠道包打包神器 方案进行了多渠道打包.但是由于马虎,在配置 ...
- CloudFoundry V2 单机版离线安装(伪离线安装)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangdk789/article/details/30255763 之前安装CloudFou ...
- 浅谈Spark2.x中的Structured Streaming
在Spark2.x中,Spark Streaming获得了比较全面的升级,称为Structured Streaming,和之前的很不同,功能更强大,效率更高,跟其他的组件整合性也更好. 连续应用程序c ...
- Go实现查找目录下(包括子目录)替换文件内容
[功能] 按指定的目录查找出文件,如果有子目录,子目录也将进行搜索,将其中的文件内容进行替换. [缺陷] 1. 没有过滤出文本文件 2. 当文件过大时,效率不高 [代码] package main i ...
- CTreeView 的教程
整个网上搜了一圈没有好的CTreeView 的教程,所以自己谢谢看. CTreeView 是什么? C打头的东西当然是一个类了. 有类就有继承,他的继承关系如下. 有个东西和他比较像 叫CTreeCt ...
- listview与adapter用法
Android listview与adapter用法 listview与adapter用法 博客分类: android 一个ListView通常有两个职责. (1)将数据填充到布局. (2)处理用 ...
- MySQL数据库--练习
学生选课系统 设计表关系 创建表和插入数据 /* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Ve ...
- windows的cmd命令切换磁盘路径
- vue-cli中的.babelrc文件介绍
转载自:http://www.cnblogs.com/ye-hcj/p/7071850.html { // 此项指明,转码的规则 "presets": [ //个人认为多此一举 [ ...