文本域光标操作（选、添、删、取）的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 ...
随机推荐
- Qt应用如何发布
原文请看:http://www.cnblogs.com/ungshow/archive/2010/10/10/1847082.html 通常情况下,使用Qt开发应用都是采用动态编译的方式来进行发布,发 ...
- 2018CCPC 中国大学生程序设计竞赛 网络赛
链接 1.括号序列贪心/CF&51nod原题 [分析]: 贪心,每次到i的时候,假如你要在i里面要卖掉股票,获益是a[i], 肯定要在前面要么:1)把已经卖了的变成不买不卖,需要-a[j], ...
- JAX-WS文章汇总
学习路线图 传送门 最简单的Web Service实现- 这里提供一个最简单的Web Service的实现,基于JAX-WS.除了jdk不需要任何其他jar包,使用Eclipse提供的Web Serv ...
- HttpClient不同版本超时时间的设置
引自 https://www.cnblogs.com/hisunhyx/p/5028391.html 3.X是这样的 HttpClient client=new DefaultHttpClient() ...
- VMware Workstation的三种网络连接方式
桥接模式(Bridged).NAT模式(地址转换模式).仅主机模式(Host-Only) 桥接模式就是将主机网卡与虚拟机的网卡利用虚拟网桥进行通信.在桥接的作用下,类似于把物理主机虚拟为一个交换机,所 ...
- 第5天：Ansible-Playbook
Ansible中的每个模块专注于某一方面的功能.虽然每个模块实现的功能都比较简单,但是,将各个模块结合起来就可以实现比较复杂的功能.在Ansible中,将各个模块组合起来的文件是一个YAML格式的配置 ...
- 设计模式-外观模式（Facade Pattern）
本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 外观模式简介 外观模式的作用用一句话说就是简化接口,举个例子楼主每次编程的时候都要点开IDE.点 ...
- SQLSEVER 中的那些键和约束
SQL Server中有五种约束类型,分别是 PRIMARY KEY约束.FOREIGN KEY约束.UNIQUE约束.DEFAULT约束.和CHECK约束.查看或者创建约束都要使用到 Microso ...
- 计蒜客NOIP2018模拟1
https://www.jisuanke.com/contest/1152 T1:最失败的一道题,其实就是道水题,好几种写法,一种都没想出来. 题意转化后就是:每个数可以选a[i]和a[i]-k,最后 ...
- BZOJ 2430 [Poi2003]Chocolate（贪心+归并排序）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2430 [题目大意] 有一块n*m的矩形巧克力,准备将它切成n*m块. 巧克力上共有n- ...