文本域光标操作（选、添、删、取）的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 ...
随机推荐
- css3翻书效果
强大的css3不需要解释,代码分层理解[直接复制],很有意思. 效果图: <ul class="align"> <li> <figure class= ...
- OpenStack 镜像服务 Glance部署（七）
创建虚拟机我们需要有glance的支持,因为glance是提供镜像的服务. Glance有两个比较重要的服务: Glance-api:接受云系统镜像的构建.删除.读取请求 Glance-Registr ...
- Java Control Statements
Java Control Statements Java For Loop public class ForExample1 { public static void main(String[] ar ...
- ThoughtWorks测试
Fizz-Buzz-Whizz 问题描述: 1. 你首先说出三个不同的特殊数,要求必须是个位数,比如3.5.7. 2. 让所有学生拍成一队,然后按顺序报数. 3. 学生报数时,如果所报数字是第一个特殊 ...
- VisualStudio 2013 快捷键
有些快捷键不是默认的,需要插件支持,如Resharper,WebEssentials,VSCommands Ctrl单键系列 Ctrl+Q Quick Info Ctrl+W Extend Selec ...
- plsql分支，循环，异常
pl/sql 分支,循环和异常分支: DECLARE BEGIN END; 循环:loop,while,for 1.LOOP EXIT WHEN ...
- redis的运行机制
从以前总结的redis一些基本性能中,可知redis是非关系型数据库(nosql):这一类的数据类型有以下特点: 非关系型的(sql语句对它不起作用,不需要建表存数据,它是直接存储),分布式(主从复制 ...
- 线性基【CF845G】Shortest Path Problem?
Description 给定一张 \(n\) 个点 \(m\) 条边的无向图,一开始你在点 \(1\),且价值为 \(0\) 每次你可以选择一个相邻的点,然后走过去,并将价值异或上该边权 如果在点 \ ...
- changing chmod for files but not directories
find . -type f -print0 | xargs -0 chmod 644
- Failure INSTALL FAILED DUPLICATE PERMISSION
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha Failure [INSTALL_FAILED_DUPLICATE_PERMISSION ...