JavaScript讓Textarea支持tab按鍵的方法
更新時間:2015年06月26日 15:24:54 作者:不吃皮蛋
這篇文章主要介紹了JavaScript讓Textarea支持tab按鍵的方法,涉及javascript針對textarea實現(xiàn)響應tab按鍵的方法,需要的朋友可以參考下
本文實例講述了JavaScript讓Textarea支持tab按鍵的方法。分享給大家供大家參考。具體實現(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); } } }
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
- JavaScript獲取并更改input標簽name屬性的方法
- javascript實現(xiàn)依次輸入input自動定焦
- javascript使用正則控制input輸入框允許輸入的值方法大全
- input 日期選擇功能的javascript代碼
- JavaScript實現(xiàn)點擊自動選擇TextArea文本的方法
- 一個JavaScript處理textarea中的字符成每一行實例
- JavaScript判斷textarea值是否為空并給出相應提示
- Javascript 文本框textarea高度隨內(nèi)容自適應增長收縮
- JavaScript實現(xiàn)為input與textarea自定義hover,focus效果的方法
相關(guān)文章
跟我學習javascript的垃圾回收機制與內(nèi)存管理
跟我學習javascript的垃圾回收機制與內(nèi)存管理,感興趣的小伙伴們可以參考一下2015-11-11BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁并關(guān)閉功能
這篇文章主要介紹了BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁并關(guān)閉的功能,實現(xiàn)方法簡單易懂,需要的朋友可以參考下2017-01-01javascript實現(xiàn)可改變滾動方向的無縫滾動實例
無縫滾動在制作一些圖片展示的時候還是蠻有用的,下面與大家分享下javascript實現(xiàn)的可改變滾動方向的無縫滾動,具體實現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06