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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
js绑定事件和解绑事件
Apr 27 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
JavaScript动态生成表格的示例
Nov 02 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP中的正规表达式(二)
2006/10/09 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python实现决策树
2017/12/21 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
财务会计大学生自我评价
2014/04/09 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
关于诚信的活动方案
2014/08/18 职场文书
个人委托函范文
2015/01/29 职场文书
好员工观后感
2015/06/17 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android