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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JS中的多态实例详解
Oct 15 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
openlayers4实现点动态扩散
Aug 17 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
许愿墙中用到的函数
2006/10/07 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python计算auc指标实例
2017/07/13 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
python数据爬下来保存的位置
2020/02/17 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
飞利浦美国官网:Philips美国
2020/02/28 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
图书室标语
2014/06/21 职场文书
镇创先争优活动总结
2014/08/28 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
公司承诺函范文
2015/01/21 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫