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

更新時間：2020年10月30日 09:58:25 作者：Terre

這篇文章主要介紹了Javascript文本框腳本實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

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

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

選擇文本

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

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

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

選擇（select）事件

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

取得選擇的文本

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

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

　　IE8 及更早的版本中有一個 document.selection 對象，其中保存著用戶在整個文檔范圍內(nèi)選擇的文本信息；兼容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)建一個范圍，并將其放在恰當(dāng)?shù)奈恢?上。然后，再使用 moveStart()和 moveEnd()這兩個范圍方法將范圍移動到位。不過，在調(diào)用這兩個方法以前，還必須使用 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 是第一個支持與剪貼板相關(guān)事件，以及通過 JavaScript 訪問剪貼板數(shù)據(jù)的瀏覽器。HTML 5 后來也把剪貼板事件納入了規(guī)范。