js實(shí)現(xiàn)按一下刪除鍵刪除整個(gè)單詞附demo
在文本框倒敘輸入一文中提到了設(shè)置文本框焦點(diǎn)的javascript代碼,今天就使用這段代碼來做一個(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實(shí)現(xiàn)文件下載并重命名代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12JavaScript新引入的原始數(shù)據(jù)類型Symbol詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型,用于表示一個(gè)獨(dú)一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用,需要的可以參考一下2023-01-01JS將光標(biāo)聚焦在文本最后的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS將光標(biāo)聚焦在文本最后的方法,需要的朋友可以參考下2014-03-03精解window.setTimeout()&window.setInterval()使用方式與參數(shù)傳遞問題!
精解window.setTimeout()&window.setInterval()使用方式與參數(shù)傳遞問題!...2007-11-11JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù)實(shí)例分析
這篇文章主要介紹了JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù),結(jié)合實(shí)例形式分析了javascript通過合理分時(shí)函數(shù)應(yīng)用避免瀏覽器卡頓或假死的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08