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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
基于jquery实现图片放大功能
May 07 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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 小乘法表实现代码
2009/07/16 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php事务处理实例详解
2014/07/11 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python类的多重继承问题深入分析
2014/11/09 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
python中线程和进程有何区别
2020/06/17 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
EJB3推出JPA的原因
2013/10/16 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技