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 相关文章推荐
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
微信小程序选择图片控件
Jan 19 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
preg_match_all使用心得分享
2014/01/31 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
js实现小星星游戏
2020/03/23 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python的print用法示例
2014/02/11 Python
Python 操作文件的基本方法总结
2017/08/10 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python+logging+yaml实现日志分割
2019/07/22 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
单位消防安全制度
2014/01/12 职场文书
中学运动会广播稿
2014/01/19 职场文书
党支部综合考察材料
2014/05/19 职场文书
体育课外活动总结
2014/07/08 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
手术室护士个人总结
2015/02/13 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年话务员工作总结
2015/04/29 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers