文本域光标操作（选、添、删、取）的jQuery扩展
; (function ($) {
/*
* 文本域光标操作（选、添、删、取）的jQuery扩展 @Mr.Think http://mrthink.net/text-field-jquery-extend/
*/
$.fn.extend({
/*
* 获取光标所在位置
*/
iGetFieldPos: function () {
var field = this.get(0);
if (document.selection) {
//IE
$(this).focus();
var sel = document.selection;
var range = sel.createRange();
var dupRange = range.duplicate();
dupRange.moveToElementText(field);
dupRange.setEndPoint('EndToEnd', range);
field.selectionStart = dupRange.text.length - range.text.length;
field.selectionEnd = field.selectionStart + range.text.length;
}
return field.selectionStart;
},
/*
* 选中指定位置内字符 || 设置光标位置
* --- 从start起选中(含第start个)，到第end结束（不含第end个）
* --- 若不输入end值，即为设置光标的位置（第start字符后）
*/
iSelectField: function (start, end) {
var field = this.get(0);
//end未定义，则为设置光标位置
if (arguments[1] == undefined) {
end = start;
}
if (document.selection) {
//IE
var range = field.createTextRange();
range.moveEnd('character', -$(this).val().length);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
} else {
//非IE
field.setSelectionRange(start, end);
$(this).focus();
}
},
/*
* 选中指定字符串
*/
iSelectStr: function (str) {
var field = this.get(0);
var i = $(this).val().indexOf(str);
i != -1 ? $(this).iSelectField(i, i + str.length) : false;
},
/*
* 在光标之后插入字符串
*/
iAddField: function (str) {
var field = this.get(0);
var v = $(this).val();
var len = $(this).val().length;
if (document.selection) {
//IE
$(this).focus()
document.selection.createRange().text = str;
} else {
//非IE
var selPos = field.selectionStart;
$(this).val($(this).val().slice(0, field.selectionStart) + str + $(this).val().slice(field.selectionStart, len));
this.iSelectField(selPos + str.length);
};
},
/*
* 删除光标前面(-)或者后面(+)的n个字符
*/
iDelField: function (n) {
var field = this.get(0);
var pos = $(this).iGetFieldPos();
var v = $(this).val();
//大于0则删除后面，小于0则删除前面
if(pos>0){
$(this).val(n > 0 ? v.slice(0, pos - n) + v.slice(pos) : v.slice(0, pos) + v.slice(pos - n));
$(this).iSelectField(pos - (n < 0 ? 0 : n));
}
}
});
})(jQuery);
应用场景
<!DOCTYPE html>
<html>
<head>
<title>无标题页</title> <script type="text/javascript" src="http://sy.zgsapt.com/js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
; (function ($) {
/*
* 文本域光标操作（选、添、删、取）的jQuery扩展 @Mr.Think http://mrthink.net/text-field-jquery-extend/
*/
$.fn.extend({
/*
* 获取光标所在位置
*/
iGetFieldPos: function () {
var field = this.get(0);
if (document.selection) {
//IE
$(this).focus();
var sel = document.selection;
var range = sel.createRange();
var dupRange = range.duplicate();
dupRange.moveToElementText(field);
dupRange.setEndPoint('EndToEnd', range);
field.selectionStart = dupRange.text.length - range.text.length;
field.selectionEnd = field.selectionStart + range.text.length;
}
return field.selectionStart;
},
/*
* 选中指定位置内字符 || 设置光标位置
* --- 从start起选中(含第start个)，到第end结束（不含第end个）
* --- 若不输入end值，即为设置光标的位置（第start字符后）
*/
iSelectField: function (start, end) {
var field = this.get(0);
//end未定义，则为设置光标位置
if (arguments[1] == undefined) {
end = start;
}
if (document.selection) {
//IE
var range = field.createTextRange();
range.moveEnd('character', -$(this).val().length);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
} else {
//非IE
field.setSelectionRange(start, end);
$(this).focus();
}
},
/*
* 选中指定字符串
*/
iSelectStr: function (str) {
var field = this.get(0);
var i = $(this).val().indexOf(str);
i != -1 ? $(this).iSelectField(i, i + str.length) : false;
},
/*
* 在光标之后插入字符串
*/
iAddField: function (str) {
var field = this.get(0);
var v = $(this).val();
var len = $(this).val().length;
if (document.selection) {
//IE
$(this).focus()
document.selection.createRange().text = str;
} else {
//非IE
var selPos = field.selectionStart;
$(this).val($(this).val().slice(0, field.selectionStart) + str + $(this).val().slice(field.selectionStart, len));
this.iSelectField(selPos + str.length);
};
},
/*
* 删除光标前面(-)或者后面(+)的n个字符
*/
iDelField: function (n) {
var field = this.get(0);
var pos = $(this).iGetFieldPos();
var v = $(this).val();
//大于0则删除后面，小于0则删除前面
$(this).val(n > 0 ? v.slice(0, pos - n) + v.slice(pos) : v.slice(0, pos) + v.slice(pos - n));
$(this).iSelectField(pos - (n < 0 ? 0 : n));
}
});
})(jQuery); $(document).ready(function () {
$("#numd").bind("mouseleave", function () {
document.getElementById('keybored').style.display = 'none';
document.getElementById('Nm').blur();
}); $("#Nm").focus(function () {
document.getElementById('keybored').style.display = '';
});
$(".readbtns").click(function () {
$("#Nm").iAddField($(this).val()); });
$(".returns").click(function () {
$("#Nm").iDelField(1); });
}); </script> </head>
<body>
<ul>
<li>
<input />
<div>
</div>
</li>
</ul>
<input id="hid" type="text" value="" style="display: none" />
<span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">
<input type="text" id="Nm" name="Nm" value="" />
<div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"
id="keybored">
<input type="button" class="readbtns" value="1" />
<input type="button" class="readbtns" value="2" />
<input type="button" class="readbtns" value="3" />
<input type="button" class="readbtns" value="4" />
<input type="button" class="readbtns" value="5" />
<input type="button" class="readbtns" value="6" />
<input type="button" class="readbtns" value="7" />
<input type="button" class="readbtns" value="8" />
<input type="button" class="readbtns" value="9" />
<input type="button" class="returns" value="<<---" />
</div>
</span>
</body>
</html>
经过查阅jQuery的hover
$('#hover_div').hover(function()
{
/* something to do on mouseenter */
},
function()
{
/* something to do on mouseleave */
});
所以上面的bind("mouseleave")完全可以用hover函数
$("#numd").hover(function () {
document.getElementById('keybored').style.display = '';
}, function () {
document.getElementById('keybored').style.display = 'none';
document.getElementById('Nm').blur();
});
文本域光标操作（选、添、删、取）的jQuery扩展的更多相关文章
- jquery 文本域光标操作（选、添、删、取）
一.JQuery扩展 ; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 http://www.cnblogs.com/phpyangbo/p/55286 ...
- 关于bootstrap--表单（下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>）
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
- spring mvc：常用标签库(文本框，密码框，文本域，复选框，单选按钮，下拉框隐藏于，上传文件等)
在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...
- js实现文本框文本域光标处插入图片文本的插件（并且光标在插入内容的内容后显示）
js: /******************************************* * * 插入光标处的插件 * @authors Du xin li * @update 2015 ...
- jquery捕捉文本域输入事件
<input type='text' /> change事件是在文本域光标失去焦点时才会触发,要监听正在输入内容事件用键盘事件监听如果想要捕捉文本域输入事件,可以使用$("inp ...
- Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载
元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...
- JS-007-富文本域操作
在日常 web 编写过程中,富文本域几乎成为了一个网站不可页面元素,同时,其也有着各种各样的实现方式,网络上也存在着各种各样的集成插件可供引用.此文以 js 获取.修改 163 邮箱写邮件时的邮件内容 ...
- Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...
- JAVA个人小程序GUI篇-收银（标签、按钮、复选框、下拉标、文本域、表格······）
如果用eclipse需先装载windowsbuild //导入包 import java.awt.BorderLayout; import java.awt.EventQueue; import ja ...
随机推荐
- 排序算法总结(C语言版)
排序算法总结(C语言版) 1. 插入排序 1.1 直接插入排序 1.2 Shell排序 2. 交换排序 2.1 冒泡排序 2.2 快速排序 3. 选择 ...
- 【剑指offer】面试题 9. 用两个栈实现队列
面试题 9. 用两个栈实现队列 题目描述 题目:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 解答过程 import java.util.Stack; publ ...
- 洛谷P2783 有机化学之神偶尔会作弊
题目传送门 啦啦啦,发个文纪念一下第一道在洛谷上A的黑题,一次性就过真是无比舒服-(虽然某些大佬说这题有点水……)题目其实思路不难,Tarjan缩点+LCA,不过因为是无向边,所以在Tarjan的时候 ...
- 洛谷——P1165 日志分析
P1165 日志分析 题目描述 M 海运公司最近要对旗下仓库的货物进出情况进行统计.目前他们所拥有的唯一记录就是一个记录集装箱进出情况的日志.该日志记录了两类操作:第一类操作为集装箱入库操作,以及该次 ...
- “玲珑杯”ACM比赛 Round #19 B -- Buildings （RMQ + 二分）
“玲珑杯”ACM比赛 Round #19 Start Time:2017-07-29 14:00:00 End Time:2017-07-29 16:30:00 Refresh Time:2017-0 ...
- UTF-8字符「EF BF BD」-备胎
在众多的utf-8码点值中,除了ascii,你还应该记住「EF BF BD」,因为它是很多编程语言以及库中的备胎,即无效的码点值在编码的时候会默认用这个码点值进行替换,即utf-8中的超级「备胎」(R ...
- 利用FusionCharts制作统计报表
今天在开发中需要用到统计报表,于是就查找了一下FusionCharts的用法,下面来总结一下利用FusionCharts怎么制作统计报表 1.建表 首先要建立所要统计报表的表,表的字段越多,统计的维度 ...
- [Lydsy1806月赛] 最长公共子序列
首先可以证明,只由一种字符构成的串总会是最优解中的一种... 考虑随便一个T与S的LIS都至少是出现次数最少的字符个数(考虑反证法,如果要更短,那么T中每种字符的个数都至多是 S 中最少的字符个数-1 ...
- 【模拟退火】poj2069 Super Star
题意:让你求空间内n个点的最小覆盖球. 模拟退火随机走的时候主要有这几种走法:①随机旋转角度. ②直接不随机,往最远的点的方向走,仅仅在尝试接受解的时候用概率.(最小圆/球覆盖时常用) ③往所有点的方 ...
- 【DFS】【枚举】Gym - 101246G - Revolutionary Roads
给你一张有向图,问你将任意一条边变成双向后,所能得到的最大强连通分量的大小. 缩点之后,预处理can(i,j)表示i能到j. 之后枚举每一条边(u,v),再枚举其他所有点t,如果can(u,t) &a ...