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 相关文章推荐
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
Vue.js的模板语法详解
Feb 16 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中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
详解Python self 参数
2019/08/30 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python 通过文件夹导入包的操作
2020/06/01 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
Linux如何为某个操作添加别名
2013/03/01 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
竞选部门副经理的自荐书范文
2014/02/11 职场文书
网络管理员岗位职责
2014/03/17 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技