JavaScript实现,控制一个文本框只能输入正整数,如输入不符合条件则文本框全部字体标红
腾讯2014年研发职位笔试题Web前端方向简单题第一题。
代码:
<html>
<head>
<title>test JavaScript</title>
<script>
window.onload = function() {
var inputInt = document.getElementById('InputInt');
inputInt.onkeyup = function() {
var num = this.value;
var re =/^[0-9]*[1-9][0-9]*$/;
if (!re.test(num)) {
this.style.color = "red";
} else {
this.style.color = "black";
}
}; } </script>
</head>
<body>
<input id="InputInt" type="number" >
</body>
</html>
用多了jQuery,都差点忘了原生js长什么样了:(
顺便复习一下。
首先,window.onload事件:浏览器加载完DOM后,会通过javascript为DOM元素添加事件。jQuery里面是$(document).ready()
这两者也还是有区别的:
| window.onload | $(document).ready() | |
| 执行时机 | 页面所有元素(包括图片及引用文件)加载完后执行 | 
 页面内所有HTML DOM, CSS DOM加载完就会执行。 如果想要所有元素(包括图片及引用文件)加载完再注册事件可以用$(window).load(function);等价于window.onload()  | 
| 可编写个数 | 只能一个。后写的会覆盖前面写的。 | 可以同时有多个。 | 
然后就是获取元素,绑定onkeyup函数,在键盘按下放开的时候判断input内的元素是否符合正整数的正则表达式,不符合则文本框内颜色变红,否则颜色为黑。
对正则表达式没有概念的可以看看这:正则表达式30分钟入门教程
JavaScript实现,控制一个文本框只能输入正整数,如输入不符合条件则文本框全部字体标红的更多相关文章
- 控制input框只能粘贴,不能输入
		
.禁用文本框的onkeydown事件 <input type="text" onkeydown="return false"> .改造,可以使用ct ...
 - javascript:控制一个元素高度始终等于浏览器高度
		
window.onresize = function(){ this.opHtight()} //给浏览器添加窗口大小改变事件window.onresize = function(){ this.op ...
 - js验证input输入正整数 和 输入的金额小数点后保留两位(PC端键盘输入)
		
// 验证开头不为零的正整数 WST.zhengZhengShuIn = function (className){ var rex = /^[1-9]{1}[0-9]*$/;//正整数 $(&quo ...
 - input输入框只能输入正整数正则
		
input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="i ...
 - JS 控制文本框只能输入中文、英文、数字与指定特殊符号
		
想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...
 - js控制文本框只能输入中文、英文、数字与指定特殊符号.
		
先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...
 - 用Jquery控制文本框只能输入数字和字母
		
用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...
 - JavaScript 中怎样判断文本框只能输出英文字母、汉字和数字,不能输入特殊字符!
		
JS-只能输入中文和英文2008-11-08 10:17在js中用正则表达式对象(RegExp)判断中文 ^[\u0391-\uFFE5]+$英文 ^[A-Za-z]+$中文和英文/^[\u0391- ...
 - GUI编程笔记(java)09:GUI控制文本框只能输入数字字符案例
		
1.首先我们看看我的需求,如下: 控制文本框只能输入数字字符 2.源代码: package cn.itcast_07; import java.awt.FlowLayout; import jav ...
 
随机推荐
- Windows 10专业版激活(附激活码)
			
安全密钥:BT6TH-FN8VP-6WGCK-6BM9R-MWRDB(使用有效,在物理机,虚拟机都激活了一次) 六一八期间自己买了配件第一次组了台式机,系统是在123pe下的原版win10,装好机器之 ...
 - 【JSOI2018】绝地反击
			
题面 50pts 首先当然是二分答案\(mid\), 对于每一个点,以它为圆心的圆,交上攻击轨道: 那么这个点到攻击轨迹的可达范围就是一段圆弧. 怎么求这段圆弧呢? 我们知道圆弧可以用其两端点对于圆心 ...
 - pixhawk 常见问题 持续更新
			
红灯蓝灯闪,初始化中,请稍等 黄灯双闪,错误,系统拒绝解锁 黄灯闪,遥控器关闭 黄灯快速闪且滴滴响,电池保护激活 蓝灯... 未见过.... 绿灯闪: 已加锁,GPS锁定已获得. 准备解锁. 从加锁状 ...
 - Coreutils - GNU core utilities
			
coreutils 是GNU下的一个软件包,包含linux下的 ls等常用命令.这些命令的实现要依赖于shell程序.一般在系统中都默认安装,也可自己安装或更新.例如,安装coreutils-6.7. ...
 - 使用tomcat脚本开启服务
			
参考:https://www.cnblogs.com/fps2tao/p/8488596.html 1.编写tomcat脚本 在/etc/init.d/目录下创建tomcat服务脚本文件 cd /e ...
 - SpringBoot集成lombook让代码更简洁
			
1)添加lombok依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>l ...
 - 【springmvc学习】常用注解总结
			
@Controller 在springmvc中,我们用它来告诉前端控制器,他这个类是controller,也就是springmvc的一个对象了,我们在spring.xml配置文件中用<conte ...
 - win7开机启动项设置
			
Windows系统自身就有启动项命令可以进行设置: 要说到修改启动项,当然首推Windows系统自带的“MSCONFIG”命令,XP等其他Windows系统用户使用方法是一模一样的. 1.点击“开始” ...
 - 计算机组成原理(电脑硬件&语言分类)
			
计算机组成原理 一.电脑硬件配置 CPU :中央处理器(人类的大脑) -飞机 内存:存放一些临时数据(人类的短暂记忆-右脑) -高铁 硬盘:存储永久数据(左脑-长期记忆) - 汽车 输入输出:键盘鼠标 ...
 - 类的加载classload和类对象的生成
			
在Java中最重要的可以说就是类的加载了.不论我们编写的功能多么复杂,或是多么简单,永远逃离不开的,就是将这个类从class文件加载到JVM中来. 类的加载过程 首先我们要了解一下类的加载过程,包括: ...