javascript特殊文本输入框网页特效
本文实例为大家分享了特殊js文本输入框网页特效，供大家参考，具体内容如下
实例一：让文本框只带有下划线
<script type="text/javascript">
function changeTextStyle(){ //让文本框只带有下划线
//获得文本框的DOM
var myText = document.getElementById("myText");
myText.style.borderColor = 'black'; //设置边框颜色
myText.style.borderStyle = 'solid'; //设置边框样式为实线
myText.style.borderWidth = '0 0 1px 0'; //设置边框大小，0代表无
}
</script>
实例二：首字母或全部字母大写
<script type="text/javascript">
//格式校验
function validateInput(){
//获得文本框的DOM
var myText1 = document.getElementById("myText1");
var myText2 = document.getElementById("myText2");
var val1 = myText1.value; //文本框1的值
var val2 = myText2.value; //文本框2的值
var errMsg = ''; //定义错误提示字符
//判断是否以大写字母开头
if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){
//拼接错误字符
errMsg = '文本框1的首字母需要大写\n';
alert(errMsg);
}
if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){
//拼接错误字符
errMsg = '文本框2的需要全部为大写字母\n';
alert(errMsg);
}
}
</script>
实例三：只能输入数字的文本框
<script type="text/javascript">
//格式校验
function validateInput(){
//获得文本框的DOM
var myText = document.getElementById("myText");
var val = myText.value; //获取用户输入的值
if(!/\b[0-9]+\b/.test(val)){ //使用正则校验
alert('只能输入数字'); //提示错误信息
}
}
</script>
实例四：用正则表达式验证Email格式
<script type="text/javascript">
//格式校验
function validateInput(){
//获得文本框的DOM
var myText = document.getElementById("myText");
var email = myText.value; //获得用户输入的Email
//定义正则表达式
var emailReg
= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if(emailReg.test(email)){ //判断是否符合格式要求
alert("校验通过，允许提交"); //通过
}else{
alert("校验失败，请检查重新输入"); //验证失败
}
}
</script>
实例五：成为焦点时清除文本框内容
<script type="text/javascript">
//清楚内容
function clearContent(myText){
myText.value = ''; //把文本内容的值设为空字符
}
</script>
<input type="text" value="" onfocus="clearContent(this)"/>
实例六：用户输入完以后立刻进行格式校验
<script type="text/javascript">
function validateTel(){ //格式校验
//获得文本框的DOM
var myTel = document.getElementById("myTel");
var val = myTel.value; //获取用户输入的值
if(!/\b[0-9]+\b/.test(val)){ //使用正则校验
alert('只能输入数字'); //提示错误信息
//修改样式，引起注意
myTel.style.border = '1px solid red';
}else if(val.length != 11){ //长度必须是11位
alert('手机号码是11位'); //提示错误信息
//修改样式，引起注意
myTel.style.border = '1px solid red';
}else{
//修改样式，表示通过了
myTel.style.border = '1px solid green';
return true;
}
}
</script>
<input type="text" value="" id="myTel" onblur="validateTel()"/>
实例七：输入文字时文本框边框闪烁
onfocus()和onblur()最好成对编写！
<script type="text/javascript">
//初始化函数
function init(){
//获取所有的文本DOM
var texts = document.getElementsByTagName('input');
//遍历所有的文本框
for(var i=0;i<texts.length;i++){
var t = texts[i];//当前文本框
var timer;
//监听聚焦事件
t.onfocus = function(){
var e = this;//保留当前DOM的引用
//开始闪烁的定时器
timer = setInterval(function(){
//获取当前的边框颜色变量
var c = e.style.borderColor;
if(c == 'yellow'){//如果是黄色
e.style.borderColor = '';//恢复原色
}else{//否则，边框变成黄色
e.style.borderColor = 'yellow';
}
},1000);//每1秒闪烁一次
};
t.onblur = function(){//监听离开事件
//恢复边框颜色
t.style.borderColor = '';
clearInterval(timer);//清除定时器
}
}
}
</script>
<body style="text-align:center;" onload="init();">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现文本框输入文字个数限制代码
通常情况下,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,较为人性化的网站可能会有可输入字数倒计效果,比如还剩余20可以输入这样的提示,下面就通过一个实例介绍一下如何实现此效果. 先看看效果图: 代码如下: <html> <head> <title>文本框输入文字倒计效果代码</title> <style type="text/css"> * { margin:0; padding:0; } .box {
-
js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </
-
js行号显示的文本框实现效果(兼容多种浏览器 )
利用js打造的一个非常实用简易的文本编辑框,可以显示行号并且同时兼容ie和firefox等主流浏览器,如下效果图: 以下是该效果的源码: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>显示行号的文本框效果,兼容ie.火狐等浏览器</title> <style type=&q
-
js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/
-
JavaScript文本框脚本编写的注意事项
在HTML中,有两种方式来表现文本框: 一种是使用input元素的单行文本,另一种是使用textarea的多行文本框. 使用input方式,必须添加type,设置为"text". size特性,可以指定文本框内能够显示的字符数. value属性可以设置文本框的初始值. maxlength特性则是用于指定文本框内可以接受的最大字符数. textarea的初始值则必须放在开始和结束标签之内. cols是文本框字符行数: rows是文本框字符列数: 另外,不能在HTML中给textarea指
-
js点击文本框后才加载验证码实例代码
经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title
-
js计算文本框输入的字符数
使用JavaScript实时的计算用户当前输入的字符数函数代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript统计字符数</title> <script language="javascript"> function C
-
js如何实现点击标签文字，文字在文本框出现
js实现点击标签文字,文字出现在文本框里,下面2种方法实现的功能略有不同,总体来说方法一功能更强大. 第一种方法:随意点击任何标签都会出现在文本框中,如何第二次点击标签,对应的文字就会在文本框中消失. <style>.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }</style> <in
-
js文本框输入内容智能提示效果
本文实例讲述了js文本框输入内容智能提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 大体思路: 1.监听文本框事件.这里是用的keyup事件.大家可以尝试用onchange事件.不过感觉keyup事件的效果要好一点. 2.根据输入内容通过ajax异步的方式去访问后台数据. 3.遍历返回数据将数据添加到显示区域. 4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失. 5.后台数据应该拼接成json格式. 具体代码如下: <!DOCTYP
-
js判断文本框输入的内容是否为数字
如何验证文本框中的内容是否为数字,本文提供了三种方法,希望对大家的学习有所启发. 在某些情况下可能需要让文本框中的内容只能够输入数字,例如手机号码或者邮编之类的,下面简单介绍一下如何实现此功能. 下面是验证数字的正则表达式: "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]