文本框類型

在編寫表單相關的東西的時候，通常有兩個標簽標示文本框：一種是單行文本框input標簽，另一種是多行文本框textarea標簽。這兩種標簽比較相似，但是他們也有區別。

如果一定要用input標簽標示文本框，那么就必須在type屬性中設置”text”。通過設置size屬性可以指定文本框中顯示字數的字符數。通過value屬性，可以設置文本框的默認文字。通過maxlength屬性可以指定文本框的最大字符數。小例子如下

HTML代碼

然后textarea標簽始終會呈現一個多行文本框。rows和cols屬性可以指定文本框的行數和列數。rows屬性是指定文本框的字符行數;cols是指定文本框的字符列數。小例子如下

HTML代碼

夢龍小站

在textarea中并不能設置最大字符數，這是與input的一點小區別。無論這兩種文本框在標記中有什么其他區別，它們都會將用戶輸入的內容保存在value屬性中。可以通過value屬性讀取或者設置文本框的值。小例子如下

HTML代碼

夢龍小站textarea

JavaScript代碼window.onload = function(){

var oInp = document.getElementById("inp");

var oTex = document.getElementById("tex");

alert("oInp的value："+ oInp.value +";\ntex的value："+ tex.value)

};

Chrome預覽效果

選擇文本的方法

Input標簽和textarea標簽都支持select()方法，這個方法用于選擇文本框中的所有文本。在調用select()方法的時候，大多數瀏覽器(除Opera)都可以將焦點設置到文本框中。這個方法不接受參數，可以在任何時候被調用。

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

HTML代碼

JavaScript代碼window.onload = function(){

var oInp = document.getElementById("inp");

oInp.select();

};

Chrome預覽效果

上面的代碼應用到文本框之后，只要文本框獲得焦點之后，就回選擇其中所有的文本。這種技術能夠較大幅度地提升表單的用戶體驗。

1、選擇(select)事件

與select()方法相對應，有一個select事件。在選擇了文本框中的文字的時候，就會觸發select事件。不過，觸發的時間每個瀏覽器都不太相同。在IE9+、Chrome、Opera、Safari和Firefox中，只有用戶選擇了文本(而且要釋放鼠標的時候)，才會觸發select事件。而IE8之前的版本中，只要用戶選擇了一個字母(不必釋放鼠標)就會觸發select事件。在調用select()方法的時候也會觸發select事件。小例子如下

HTML代碼

JavaScript代碼window.onload = function(){

var oInp = document.getElementById("inp");

//選擇文本框的字

oInp.addEventListener('select',function(){

alert(oInp.value)

}, false);

};

Chrome預覽效果

2、取得選擇的文本

雖然通過select事件我們可以知道用戶選擇文本的時間，但是不知道用戶選擇了哪些文本。HTML5新添加的一些屬性幫大家解決了這些問題。HTML5新添加了selectionStart屬性和selectionEnd屬性。這兩個屬性中保存的是基于0的數值，表示所選擇的文本的范圍(即文本選區開頭和結尾的偏移量)。所以要取得用戶在文本框中的選擇文本就非常容易了。小例子如下

HTML代碼

JavaScript代碼window.onload = function(){

var oInp = document.getElementById("inp");

function getSelectedText(textBox){

return textBox.value.substring(textBox.selectionStart, textBox.selectionEnd);

}

//選擇文本框的字

oInp.addEventListener('select',function(){

alert(getSelectedText(oInp))

}, false);

};

Chrome預覽效果

上面的小例子運用了substring()方法。這個方法基于字符串的偏移量執行操作，將selectionStart和selectionEnd直接做參數傳入即可得到相應的字符串。支持selectionStart屬性和selectionEnd屬性的瀏覽器有Opera、Chrome、Firefox、IE9+和Safari。IE8及更早的版本中有一個document。Selection對象，其中保存著用戶在整個文檔范圍內選擇的文本信息。

兼容IE的JavaScript代碼window.onload = function(){

var oInp = document.getElementById("inp");

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;

}

}

//選擇文本框的字

oInp.addEventListener('select',function(){

alert(getSelectedText(oInp))

}, false);

};

3、選擇部分文本

針對選擇部分文本，HTML5也有相應的解決方法。HTML5添加了setSelectionRange()方法，這個方法早在Firefox中引入。現在除了select()方法之外，所有文本框都有一個setSelectionRange()方法。setSelectionRange()方法接收兩個參數：要選擇的第一個字符的索引和要選擇的最后一個字符之后的字符的索引(參數類似于substring()方法的兩個參數)。小例子如下。

HTML代碼

JavaScript代碼window.onload = function(){

var oInp = document.getElementById("inp");

var oInpValue = oInp.value;

//選擇所有文本

oInp.setSelectionRange(0, oInp.value.length); //夢龍小站input

//選擇前3個字符

oInp.setSelectionRange(0, 3); //夢龍小

//選擇第4到第6個字符

oInp.setSelectionRange(3, 7); //站inp

};

想看到選擇的文本，必須在調用setSelectionRange()方法之前和之后立即將焦點設置到選擇的文本框上。在Chrome、Firefox、Opera、Safari和IE9支持上面的方法。

IE8之前的版本支持使用范圍。為了實現跨瀏覽器編程。小例子如下。

JavaScript代碼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.select();

}

};

上面selectText()方法接收三個參數：要操作的文本框、要選擇的文本中第一個字符的索引和要選擇文本中最后一個字符之后的索引。首先，函數檢測了文本框是否包含setSelectionRange()方法。如果有，則使用setSelectionRange()方法。否則，檢測文本框是否支持createTextRange()方法。如果支持，則通過創建范圍來實現選擇。最后，為文本框設置焦點，可以讓用戶看到選中的文本。小例子如下。

HTML代碼

JavaScript代碼window.onload = function(){

var oInp = document.getElementById("inp");

var oInpValue = oInp.value;

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.select();

}

}

//選擇所有文本

selectText(oInp, 0, oInp.value.length); //夢龍小站input

//選擇前3個字符

selectText(oInp, 0, 3); //夢龍小

//選擇第4到第6個字符

selectText(oInp, 3, 7); //站inp

};

選擇部分文本的技術在實現高級文本輸入框的時候很有用，例如提供自動完成建議的文本框就可以使用這個技術。

HTML5實戰與剖析之表單——文本框腳本就為大家介紹到這里。在HTML5實戰與剖析之表單——文本框腳本中為大家介紹了文本框類型和選擇文本的方法。其中HTML5中新添加了選擇部分文本的方法。更多有關HTML5的相關知識敬請關注夢龍小站的相關更新。

以上就是HTML5實戰與剖析之表單——文本框腳本的內容，更多相關內容請關注PHP中文網(www.gxlcms.com)！

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的html5简介的文本框,HTML5实战与剖析之表单——文本框脚本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。