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 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 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模板引擎SMARTY
2006/10/09 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python调用百度语音REST API
2018/08/30 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Python中的heapq模块源码详析
2019/01/08 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
六十岁生日答谢词
2014/01/10 职场文书
运动会解说词50字
2014/01/18 职场文书
大学毕业感言100字
2014/02/03 职场文书
2014年德育工作总结
2014/11/20 职场文书
中标通知书格式
2015/04/17 职场文书
退货证明模板
2015/06/23 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android