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也能包含文件
Oct 26 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
js实现列表向上无限滚动
Jan 13 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
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
python实现的发邮件功能示例
2019/09/11 Python
tensorflow 变长序列存储实例
2020/01/20 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
洗车工岗位职责
2014/03/15 职场文书
公开服务承诺制度
2014/03/26 职场文书
党校毕业心得体会
2014/09/13 职场文书
公司的力量观后感
2015/06/05 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
Python作用域和名称空间的详细介绍
2022/04/13 Python