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利用初始化数据装配模版的实现代码
Nov 17 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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
在html文件中也可以执行php语句的方法
2015/04/09 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
小程序实现多列选择器
2019/02/15 Javascript
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python提取页面内url列表的方法
2015/05/25 Python
python机器学习实战之K均值聚类
2017/12/20 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
python os模块在系统管理中的应用
2020/06/22 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
任意存:BOXFUL
2018/05/21 全球购物
上课睡觉检讨书
2014/01/28 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
教师节班会开场白
2015/06/01 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle