文本域光标操作（选、添、删、取）的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 ...
随机推荐
- FZU 2297 Number theory【线段树/单点更新/思维】
Given a integers x = 1, you have to apply Q (Q ≤ 100000) operations: Multiply, Divide. Input First l ...
- HDU 1011 Starship Troopers【树形DP/有依赖的01背包】
You, the leader of Starship Troopers, are sent to destroy a base of the bugs. The base is built unde ...
- python笔记四：面向对象
1.类 class Student(object): def __init__(self, name, score): self.name = name self.score = score 1)__ ...
- Spring Boot高级
Spring Boot高级内容概要一.Spring Boot与缓存二.Spring Boot与消息三.Spring Boot与检索四.Spring Boot与任务五.Spring Boot与安全六.S ...
- 洛谷——P2681 众数
P2681 众数 题目背景 Alice和Bob玩游戏 题目描述 Alice现在有一个序列a1.a2...an 现在她需要Bob支持询问一个区间内的众数,还要支持修改一个位置的ai 输入输出格式 输入格 ...
- Flask实战第41天：发送短信验证码
本项目使用的短信运营商是阿里云.使用淘宝账号登录阿里云控制台.在“产品与服务”中搜索“短信”进入短信服务 获取AccessKey 输入子账户用户名 权限选择管理短信服务 签名管理:申请签名 模板管理: ...
- bytes2HexString
public static String bytes2HexString(byte[] b) { String r = ""; for (int i = 0; i < b.l ...
- 【BZOJ 2288】 2288: 【POJ Challenge】生日礼物 （贪心+优先队列+双向链表）
2288: [POJ Challenge]生日礼物 Description ftiasch 18岁生日的时候,lqp18_31给她看了一个神奇的序列 A1, A2, ..., AN. 她被允许选择不超 ...
- 【20181019T1】加密【逆元+位运算】
题面 [错解] 可能要逆推 <<就是乘法,好做 但^是什么东西? 欸暴力map70分,索性妥协 [正解] 注意^是自己异或上自己右移,前i位就是t的前i位 往后推就好 代码
- BZOJ 1123 [POI2008]BLO（Tarjan算法）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1123 [题目大意] Byteotia城市有n个towns,m条双向roads. 每条r ...