APP开发公司详解如何实现email类型文本功能,深圳APP开发公司编程工程师结合多年移动端平台搭建经验,整理出用下面的代码就可以创建一个email类型的<input>标签。
<inputtype="email"/>
这样最简单地使用时,只是在输入的时候验证是否符合最简单的email格式,在设置默认值的时候依然用value属性。<inputtype=”email”value=”xx@qq.com”/>
当value为空或没有这个属性时placeholder设置的内容才会被显示。<inputtype=”email”value=””placeholder=”请输入E-mail,如:xx@qq.com”/>
图2.3是placeholder显示的效果,灰灰的字体颜色。这里需要注意的是placeholder默认的不是灰色,而是<input>标签的color样式设置的颜色60%透明度的效果,所以如果color不是默认的黑色而是red红色,那么placeholder显示的则是淡红色。
作为一般的提示这是很有用的一个属性,另外还有一个设置光标的属性也非常有用,即autofocus。
<inputtype="email"autofocus="autofocus"/>
当同时设置了placeholder和autofocus时,placeholder会被显示,光标也会在输入框中闪烁,即获得焦点。设置了value值时,光标会出现在第一个字符前面而不是在最后面。如果一个页面有多个<input>标签设置了autofocus,那么在不同浏览器下光标的位置是不同的,比如Firefox会将光标定位在第一个设置元素上,而Chrome则定位在最后一个设置元素上。email一般作为重要资料通常是必填项目,这时required属性就派上用场了。required属性会告诉表单在提交时检查元素是否填写。
<inputtype="email"required="required"/>
除了必填以外,有时还需要更加复杂的验证,比如email的格式和长度,甚至仅限某个域名等,这时就要使用pattern属性了。<inputtype="email"pattern=".+z3f\.me$"/>
上面的代码用pattern属性限制只能用z3f.me结尾的email地址。pattern实质就是执行正则表达式。好了,APP开发公司本文关于“制作APP时如何实现email类型文本功能”的实操步骤以及方法就分享到这里,谢谢关注,博纳网络编辑整理。