HTML5实战与剖析之表单——文本框脚本

文本框类型

　　在编写表单相关的东西的时候，通常有两个标签标示文本框：一种是单行文本框input标签，另一种是多行文本框textarea标签。这两种标签比较相似，但是他们也有区别。

　　如果一定要用input标签标示文本框，那么就必须在type属性中设置”text”。通过设置size属性可以指定文本框中显示字数的字符数。通过value属性，可以设置文本框的默认文字。通过maxlength属性可以指定文本框的最大字符数。小例子如下

　　 HTML代码

<!-- 
	创建一个文本框
	显示25个字符，但输入不能超过50个字符	
-->
<input type="text" size="25" maxlength="50" value="梦龙小站" /> 

　　然后textarea标签始终会呈现一个多行文本框。rows和cols属性可以指定文本框的行数和列数。rows属性是指定文本框的字符行数;cols是指定文本框的字符列数。小例子如下

　　 HTML代码

<!-- 
	创建一个文本框
	显示25个字符，但输入不能超过50个字符	
-->
<input type="text" size="25" maxlength="50" value="梦龙小站" />
<!--
	创建衣蛾多行文本框
	行数是10
	列数是30
-->
<textarea cols="30" rows="10">梦龙小站</textarea> 

　　在textarea中并不能设置最大字符数，这是与input的一点小区别。无论这两种文本框在标记中有什么其他区别，它们都会将用户输入的内容保存在value属性中。可以通过value属性读取或者设置文本框的值。小例子如下

　　 HTML代码

<input id="inp" type="text" size="25" maxlength="50" value="梦龙小站input" />
<textarea id="tex" cols="30" rows="10">梦龙小站textarea</textarea> 

　　 JavaScript代码

window.onload = function(){
	var oInp = document.getElementById("inp");
	var oTex = document.getElementById("tex");

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

　　Input标签和textarea标签都支持select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法的时候，大多数浏览器(除Opera)都可以将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。

　　在文本框获得焦点的时候选择这个文本框所有的文本，这种方法非常常见，特别是在文本框包含默认值的时候。因为这样做可以让用户不必一个个的删除文本。小例子如下

HTML代码

<input id="inp" type="text" value="梦龙小站input" /> 

　　 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代码

<input id="inp" type="text" value="梦龙小站input" /> 

　　 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代码

<input id="inp" type="text" value="梦龙小站input" /> 

　　 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);
	
}; 

兼容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、选择部分文本

　　 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
}; 

　　 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();	
}
}; 

　　 HTML代码

<input id="inp" type="text" value="梦龙小站input" /> 

　　 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实战与剖析之表单——文本框脚本的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于HTML5实战与剖析之表单——文本框脚本的详细内容...