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 动画弹出窗体支持多种展现方式
Apr 29 Javascript
分页栏的web标准实现
Nov 01 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
js处理包含中文的字符串实例
Oct 11 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
JS 对象介绍
2010/01/20 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python splitlines使用技巧
2008/09/06 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python executemany的使用及注意事项
2017/03/13 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python中下标和切片的使用方法解析
2019/08/27 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
会计岗位描述
2014/02/22 职场文书
2014学年自我鉴定
2014/02/23 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2015年中个人总结范文
2015/03/10 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL