相思资源网 Design By www.200059.com
本文实例为大家分享了特殊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,文本框,输入框
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无javascript特殊文本输入框网页特效的评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。