js实现按一下删除键删除整个单词附demo


Posted in Javascript onSeptember 05, 2014

在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码,今天就使用这段代码来做一个Demo。内容就是当删除单词时就一次性删除整个单词,如图所示:
js实现按一下删除键删除整个单词附demo

下面我把示例代码贴上:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.content {width: 300px;margin: 0 auto;}
</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
</head>
<body>
<div class="content">
<textarea name="" id="demo" cols="30" rows="10"></textarea>
</div>
<script>
var getCursortPosition = function(ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || +ctrl.selectionStart === 0)
{CaretPos = ctrl.selectionStart;}
return (CaretPos);
};

var selectSomeText = function(element,begin,end)
{
if (element.setSelectionRange)
{
element.setSelectionRange(begin,end);
}
else if (element.createTextRange)
{
var range = element.createTextRange();
range.moveStart("character",begin);
range.moveEnd("character",end);
range.select();
}
};

var delWholeWord = function(text, field, pos){
var startIndex = pos;
if (field.charAt(pos-1) !== ' '){
for (var i=pos-2;i>=0;i--){
if (field.charAt(i) === ' ' || i === 0){
startIndex = i;
break;
}
}
selectSomeText(text, startIndex, pos)
}

};
$('#demo').keydown(function(event) {
if(event.keyCode !== 8) {
return;
}
var bodyText = $(this)[0];
var bodyField = $(this).val();
var pos = getCursortPosition(bodyText);
delWholeWord(bodyText, bodyField, pos);
});
</script>
</body>
</html>
Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
动态控制Table的js代码
Mar 07 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 #Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 #Javascript
jQuery表格插件datatables用法总结
Sep 05 #Javascript
jQuery中index()的用法分析
Sep 05 #Javascript
使用jquery解析XML的方法
Sep 05 #Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
You might like
PHP伪静态页面函数附使用方法
2008/06/20 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python如何调用外部系统命令
2019/08/07 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
三个Unix的命令面试题
2015/04/12 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
公司活动邀请函
2014/01/24 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
python 实现图片特效处理
2022/04/03 Python