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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
node.js超时timeout详解
Nov 26 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python如何进入交互模式
2020/07/06 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
经典大学生求职信范文
2014/01/06 职场文书
小学生作文评语集锦
2014/12/25 职场文书
生日宴会祝酒词
2015/08/10 职场文书
爱国之歌(8首)
2019/09/29 职场文书