脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 删除键删除整个单词

js实现按一下删除键删除整个单词附demo

 更新时间：2014年09月05日 18:09:27   投稿：whsnow  
使用代码实现当删除单词时就一次性删除整个单词，有个demo，相信大家看过之后就知道是什么意思了

在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码，今天就使用这段代码来做一个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>

相关文章

  • JS数据结构与算法中的队列结构详解

    JS数据结构与算法中的队列结构详解

    队列指的是一种受限的线性表，先进先出，今天通过本文带领大家认识队列及队列的应用，对JS数据结构与算法-队列结构相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • 简单实现js放大镜效果

    简单实现js放大镜效果

    这篇文章主要教大家如何简单实现js放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Bootstrap Metronic完全响应式管理模板学习笔记

    Bootstrap Metronic完全响应式管理模板学习笔记

    这篇文章主要为大家分享了Bootstrap Metronic完全响应式管理模板学习笔记，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JsChart组件使用详解

    JsChart组件使用详解

    JSChart能够在网页上生成图标，常用于统计信息，十分好用的一个JS组件。这篇文章主要介绍了JsChart组件使用详解,需要的朋友可以参考下
    2018-03-03
  • layui左侧菜单栏鼠标悬停显示菜单文字功能实现

    layui左侧菜单栏鼠标悬停显示菜单文字功能实现

    layui封装的左侧菜单是固定宽度的,且左侧菜单栏在css里改变宽度,效果并不是很好（还设计头部菜单栏）,如果写js来让菜单栏能够拉伸,也比较麻烦,那怎么最简单的,让用户看到菜单的文字呢,下面给大家分享layui左侧菜单栏鼠标悬停显示菜单文字功能实现,感兴趣的朋友一起看看吧
    2024-06-06
  • JS setCapture 区域外事件捕捉

    JS setCapture 区域外事件捕捉

    鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。
    2010-03-03
  • javascript给span标签赋值的方法

    javascript给span标签赋值的方法

    本篇文章通过两种方法给大家介绍js给span标签赋值的方法，两种方法都比较不错，特此分享给大家，供大家学习
    2015-11-11
  • 使用Threejs加载外部glb文件

    使用Threejs加载外部glb文件

    这篇文章主要介绍了使用Threejs加载外部glb文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 微信中一些常用的js方法汇总

    微信中一些常用的js方法汇总

    本文给大家汇总了一下在我们日常开发微信项目的过程中，经常需要用到的一些js方法，都是些使用频率很高，而且非常简单的方法，这里推荐给大家。
    2015-03-03
  • 页面图片浮动左右滑动效果的简单实现案例

    页面图片浮动左右滑动效果的简单实现案例

    本篇文章主要是对页面图片浮动左右滑动效果的简单实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02

最新评论