JavaScript讓Textarea支持tab按鍵的方法
本文實(shí)例講述了JavaScript讓Textarea支持tab按鍵的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea return this.selectionStart; }; HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea this.selectionStart = position; this.selectionEnd = position; this.focus(); }; HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true if (this.selectionStart == this.selectionEnd) { return false; } else { return true; } }; HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text return this.value.substring(this.selectionStart, this.selectionEnd); }; HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea this.selectionStart = start; this.selectionEnd = end; this.focus(); }; var textarea = document.getElementsByTagName('textarea')[0]; textarea.onkeydown = function(event) { //support tab on textarea if (event.keyCode == 9) { //tab was pressed var newCaretPosition; newCaretPosition = textarea.getCaretPosition() + " ".length; textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length); textarea.setCaretPosition(newCaretPosition); return false; } if(event.keyCode == 8){ //backspace if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space var newCaretPosition; newCaretPosition = textarea.getCaretPosition() - 3; textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length); textarea.setCaretPosition(newCaretPosition); } } if(event.keyCode == 37){ //left arrow var newCaretPosition; if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space newCaretPosition = textarea.getCaretPosition() - 3; textarea.setCaretPosition(newCaretPosition); } } if(event.keyCode == 39){ //right arrow var newCaretPosition; if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space newCaretPosition = textarea.getCaretPosition() + 3; textarea.setCaretPosition(newCaretPosition); } } }
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript獲取并更改input標(biāo)簽name屬性的方法
- javascript實(shí)現(xiàn)依次輸入input自動(dòng)定焦
- javascript使用正則控制input輸入框允許輸入的值方法大全
- input 日期選擇功能的javascript代碼
- JavaScript實(shí)現(xiàn)點(diǎn)擊自動(dòng)選擇TextArea文本的方法
- 一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例
- JavaScript判斷textarea值是否為空并給出相應(yīng)提示
- Javascript 文本框textarea高度隨內(nèi)容自適應(yīng)增長(zhǎng)收縮
- JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法
相關(guān)文章
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理,感興趣的小伙伴們可以參考一下2015-11-11javascript實(shí)現(xiàn)隨機(jī)顯示星星特效
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)顯示星星特效的相關(guān)資料,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js實(shí)現(xiàn)隨機(jī)顯示星星特效的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁(yè)并關(guān)閉功能
這篇文章主要介紹了BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁(yè)并關(guān)閉的功能,實(shí)現(xiàn)方法簡(jiǎn)單易懂,需要的朋友可以參考下2017-01-01JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車(chē)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車(chē)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08javascript實(shí)現(xiàn)可改變滾動(dòng)方向的無(wú)縫滾動(dòng)實(shí)例
無(wú)縫滾動(dòng)在制作一些圖片展示的時(shí)候還是蠻有用的,下面與大家分享下javascript實(shí)現(xiàn)的可改變滾動(dòng)方向的無(wú)縫滾動(dòng),具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06JS實(shí)現(xiàn)多張圖片預(yù)覽同步上傳功能
這篇文章主要介紹了JS實(shí)現(xiàn)多張圖片預(yù)覽同步上傳功能的相關(guān)資料,需要的朋友可以參考下2017-06-06js實(shí)現(xiàn)符合國(guó)情的日期插件詳解
本篇文章主要介紹了js實(shí)現(xiàn)符合國(guó)情的日期插件的方法與步驟。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01