<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>输入框检测</title> </head> <body> <p>只允许输入数字,否则红色警示</p> <form action="http://localhost/index.jsp"> <input type="textarea" id="textbox"> <button type="submit" id="mybtn">提交</button> </form> <script> var textbox=document.forms[0].elements[0]; //获取焦点事件 textbox.onfocus=function(){ if(textbox.style.backgroundColor != "red"){ textbox.style.backgroundColor="yellow"; } } //失去焦点事件 textbox.onblur=function(event){ if(/[^\d]/.test(textbox.value)){ textbox.style.backgroundColor="red"; }else{ textbox.style.backgroundColor=""; } } //change事件 textbox.onchange=function(event){ if(/[^\d]/.test(textbox.value)){ textbox.style.backgroundColor="red"; }else{ textbox.style.backgroundColor=""; } } </script> </body> </html>
JavaScript示例四(输入框数字格式检测)
原创jch_zhao 博主文章分类:JavaScript ©著作权
文章标签 javascript 文章分类 Java 后端开发
-
有趣的CSS - 简约大方的输入框
一款简约大方的动态输入框,适用于表单提交、账号登录入口。
css 输入框 前端 ui 输入框交互