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 相关文章推荐
Jquery 动态生成表格示例代码
Dec 24 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 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获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
python动态性强类型用法实例
2015/05/09 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python之循环结构
2019/01/15 Python
python中dict使用方法详解
2019/07/17 Python
Tensorflow累加的实现案例
2020/02/05 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
就业自荐信
2013/12/04 职场文书
供应链金融服务方案
2014/05/25 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python