js實(shí)現(xiàn)按一下刪除鍵刪除整個(gè)單詞附demo
更新時(shí)間：2014年09月05日 18:09:27 投稿：whsnow
使用代碼實(shí)現(xiàn)當(dāng)刪除單詞時(shí)就一次性刪除整個(gè)單詞，有個(gè)demo，相信大家看過(guò)之后就知道是什么意思了
在文本框倒敘輸入一文中提到了設(shè)置文本框焦點(diǎn)的javascript代碼，今天就使用這段代碼來(lái)做一個(gè)Demo。內(nèi)容就是當(dāng)刪除單詞時(shí)就一次性刪除整個(gè)單詞，如圖所示：
下面我把示例代碼貼上：
<!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>
相關(guān)文章
javaScript call 函數(shù)的用法說(shuō)明
javaScript 中的 call() 是一個(gè)奇妙的方法，但也是一個(gè)讓人迷惑的方法，先看一下官方的解釋。2010-04-04
js利用與或運(yùn)算符優(yōu)先級(jí)實(shí)現(xiàn)if else條件判斷表達(dá)式
利用與或運(yùn)算符優(yōu)先級(jí)實(shí)現(xiàn)if else運(yùn)算，讓你的代碼更精簡(jiǎn)。2010-04-04
基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
js子頁(yè)面獲取父頁(yè)面數(shù)據(jù)示例
這篇文章主要介紹了js子頁(yè)面如何獲取父頁(yè)面數(shù)據(jù),需要的朋友可以參考下2014-05-05
錄屏軟件對(duì)于我們來(lái)說(shuō)都不陌生了,本文我們要做的事情是實(shí)現(xiàn)自己的錄屏軟件,載體使用Electron,因?yàn)樗m合錄制桌面的場(chǎng)景,下面我們就來(lái)看看具體實(shí)現(xiàn)方法吧2024-01-01
百度UEditor編輯器如何關(guān)閉抓取遠(yuǎn)程圖片功能
這篇文章主要介紹了百度UEditor編輯器如何關(guān)閉抓取遠(yuǎn)程圖片功能,需要的朋友可以參考下2015-03-03
JS數(shù)組扁平化的方法合集(遞歸，while循環(huán)，flat)
數(shù)組扁平化也是面試?？碱}之一,今天就和大家簡(jiǎn)單分享一下常見(jiàn)的數(shù)組扁平方法,這題其實(shí)主要考察的是遞歸思想,因?yàn)楫?dāng)數(shù)組里面嵌套非常多層數(shù)組的時(shí)候只能通過(guò)循環(huán)遞歸來(lái)進(jìn)行扁平,本次分享主要也是分享本題的遞歸思想,需要的朋友可以參考下2024-06-06
javascript中等于（==）與全等（===）的區(qū)別說(shuō)明
等于（==）的情況下 只要值相同就返回True。而全等（===）的時(shí)候需要值和類型都要匹配才能返回True.2011-01-01
小程序?qū)崿F(xiàn)短信登錄倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)短信登錄倒計(jì)時(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
在很多網(wǎng)頁(yè)上可以看到，點(diǎn)擊網(wǎng)頁(yè)的某個(gè)地方能夠彈出一個(gè)新窗口，并且可以在屏幕中隨意拖動(dòng)，通過(guò)此篇文章給大家介紹javascript彈出拖動(dòng)窗口，有需要的朋友可以參考下2015-08-08