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

标签: html5 文本框 脚本 | 发表时间:2014-02-11 17:02 | 作者:LiMengXiaoLong
出处:http://blog.csdn.net



  文本框类型


  在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框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)
};

   Chrome预览效果


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


  选择文本的方法


  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 预览效果


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


  上面的代码应用到文本框之后,只要文本框获得焦点之后,就回选择其中所有的文本。这种技术能够较大幅度地提升表单的用户体验。


  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预览效果


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


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

   Chrome预览效果


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


  上面的小例子运用了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代码


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

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


<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实战与剖析之表单——文本框脚本就为大家介绍到这里。在HTML5实战与剖析之表单——文本框脚本中为大家介绍了文本框类型和选择文本的方法。其中HTML5中新添加了选择部分文本的方法。更多有关HTML5的相关知识敬请关注梦龙小站的相关更新。





作者:LiMengXiaoLong 发表于2014-2-11 9:02:44 原文链接
阅读:1 评论:0 查看评论

相关 [html5 文本框 脚本] 推荐:

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

- - CSDN博客推荐文章
  在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签. 这两种标签比较相似,但是他们也有区别.   如果一定要用input标签标示文本框,那么就必须在type属性中设置”text”. 通过设置size属性可以指定文本框中显示字数的字符数.

监听文本框输入

- - 博客园_Ruby's Louvre
Firefox、Chrome、IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发).

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5漫谈(4)–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com). http://phonegap.com)按官方说法,是HTML5移动应用平台,它包括两部分:. 1)       应用开发框架:采用Web/HTML5技术编写应用,支持设备能力(如GPS、重力感应等)调用;支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签,根据内容和类型的不同,被分为7大类. 语义化标签可以简化HTML页面设计,并且将来搜索引擎在抓取和索引网页的时候,也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT(PDF) 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面:一方面,当然了,就是HTML5. 我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范.