Javascript實現(xiàn)文本框腳本的方法

這篇文章將為大家詳細講解有關Javascript實現(xiàn)文本框腳本的方法，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

在 HTML 中，有兩種方式來表現(xiàn)文本框：一種是使用<input>元素的單行文本框，另一種是使用 <textarea>的多行文本框。這兩個控件非常相似，而且多數(shù)時候的行為也差不多。不過，它們之間仍 然存在一些重要的區(qū)別。

相對而言，<textarea>元素則始終會呈現(xiàn)為一個多行文本框。要指定文本框的大小，可以使用 rows 和 cols 特性。其中，rows 特性指定的是文本框的字符行數(shù)，而 cols 特性指定的是文本框的字符列數(shù) （類似于 <inpu> 元素的 size 特性）。與 <input> 元素不同， <textarea> 的初始值必須要放在 <textarea>和</textarea>之間。

選擇文本

上述兩種文本框都支持 select()方法，這個方法用于選擇文本框中的所有文本。在調用 select() 方法時，大多數(shù)瀏覽器（Opera 除外）都會將焦點設置到文本框中。這個方法不接受參數(shù)，可以在任何 時候被調用。

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文本框獲得焦點時選擇其所有文本，這是一種非常常見的做法，特別是在文本框包含默認值的時 候。因為這樣做可以讓用戶不必一個一個地刪除文本。

&#8203;選擇（select）事件

與 select()方法對應的，是一個 select 事件。在選擇了文本框中的文本時，就會觸發(fā) select 事件。不過，到底什么時候觸發(fā) select 事件，還會因瀏覽器而異。

取得選擇的文本

雖然通過 select 事件我們可以知道用戶什么時候選擇了文本，但仍然不知道用戶選擇了什么文本。HTML5 通過一些擴展方案解決了這個問題，以便更順利地取得選擇的文本。該規(guī)范采取的辦法是添加 兩個屬性：selectionStart 和 selectionEnd。這兩個屬性中保存的是基于 0 的數(shù)值，表示所選擇 文本的范圍（即文本選區(qū)開頭和結尾的偏移量）。因此，要取得用戶在文本框中選擇的文本，可以使用 如下代碼。

function getSelectedText(textbox){
 return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

　　IE8 及更早的版本中有一個 document.selection 對象，其中保存著用戶在整個文檔范圍內選擇 的文本信息；兼容IE8的寫法

function getSelectedText(textbox){ 
 if (typeof textbox.selectionStart == "number"){ 
  return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); 
 } else if (document.selection){ 
  return document.selection.createRange().text;
 } 
}

選擇部分文本

現(xiàn)在除 select()方法之外，所有文本框都有一個 setSelectionRange() 方法。這個方法接收兩個參數(shù)：要選擇的第一個字符的索引和要選擇的最后一個字符之后的字符的索引 （類似于 substring()方法的兩個參數(shù)）。

textbox.value = "Hello world!"
//選擇所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//選擇前 3 個字符
textbox.setSelectionRange(0, 3); //"Hel"
//選擇第 4 到第 6 個字符
textbox.setSelectionRange(4, 7); //"o w"

E8 及更早版本支持使用范圍選擇部分文本。要選擇文本框中的部分文本，必須 首先使用 IE 在所有文本框上提供的 createTextRange()方法創(chuàng)建一個范圍，并將其放在恰當?shù)奈恢?上。然后，再使用 moveStart()和 moveEnd()這兩個范圍方法將范圍移動到位。不過，在調用這兩個 方法以前，還必須使用 collapse()將范圍折疊到文本框的開始位置。此時，moveStart()將范圍的起 點和終點移動到了相同的位置，只要再給 moveEnd()傳入要選擇的字符總數(shù)即可。最后一步，就是使 用范圍的 select()方法選擇文本，如下面的例子所示。

textbox.value = "Hello world!";
var range = textbox.createTextRange();
//選擇所有文本 "Hello world!"
range.collapse(true); range.moveStart("character", 0); 
range.moveEnd("character", textbox.value.length); 
range.select();
​
//選擇前 3 個字符 "Hel"
range.collapse(true); 
range.moveStart("character", 0); 
range.moveEnd("character", 3); 
range.select();
​
//選擇第 4 到第 6 個字符 "o w"
range.collapse(true); 
range.moveStart("character", 4); 
range.moveEnd("character", 3); 
range.select();

兼容IE8的寫法

function selectText(textbox, startIndex, stopIndex){
 if (textbox.setSelectionRange){ 
  textbox.setSelectionRange(startIndex, stopIndex); 
 } else if (textbox.createTextRange){ 
  var range = textbox.createTextRange(); 
  range.collapse(true); 
  range.moveStart("character", startIndex); 
  range.moveEnd("character", stopIndex - startIndex); 
  range.select();
  }
  textbox.focus();
}

操作剪貼板

IE 是第一個支持與剪貼板相關事件，以及通過 JavaScript 訪問剪貼板數(shù)據(jù)的瀏覽器。HTML 5 后來也把剪貼板事件納入了規(guī)范。

• beforecopy：在發(fā)生復制操作前觸發(fā) 。
• copy：在發(fā)生復制操作時觸發(fā)。
• beforecut：在發(fā)生剪切操作前觸發(fā)。
• cut：在發(fā)生剪切操作時觸發(fā)。
• beforepaste：在發(fā)生粘貼操作前觸發(fā)。
• paste：在發(fā)生粘貼操作時觸發(fā)。

關于Javascript實現(xiàn)文本框腳本的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。