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 ...
随机推荐
- mybatis # $的区别
1 #是将传入的值当做字符串的形式,eg:select id,name,age from student where id =#{id},当前端把id值1,传入到后台的时候,就相当于 select i ...
- 《数据结构与算法分析——C语言描述》ADT实现(NO.00) : 链表(Linked-List)
开始学习数据结构,使用的教材是机械工业出版社的<数据结构与算法分析——C语言描述>,计划将书中的ADT用C语言实现一遍,记录于此.下面是第一个最简单的结构——链表. 链表(Linked-L ...
- Hdfs的列存储和行存储
列可以分开存储,对于重复性高的数据压缩比会高,但是在元组(行shi)恢复会比较消耗性能 于传统列存储不同 是行组会存储于同一节点中,列扫描会比较快(因为只需扫描一个行组)
- 关于SQL查询效率 主要针对sql server
1.关于SQL查询效率,100w数据,查询只要1秒,与您分享:机器情况p4: 2.4内存: 1 Gos: windows 2003数据库: ms sql server 2000目的: 查询性能测试,比 ...
- Octave 软件的安装
每次安装软件都感觉是一种心痛的历程.下载安装,然后就跳出一堆的错误,之后就各种百度求救,然后就搞了大半天,有时候还搞不定. 最后,搞定的时候发现,原来这么简单,结果时间就这样浪费了,所以还是把这个过程 ...
- hdu6243
hdu6243结论题,每个的概率是(n-1)/n,然后乘以总数n,结果就是 n-1 #include<iostream> #include<cstdio> #include&l ...
- 【noip】跟着洛谷刷noip题
传送门 1.铺地毯 d1t1 模拟 //Twenty #include<cstdio> #include<cstdlib> #include<iostream> # ...
- 一次完整的HTTP事务的过程、从输入URL到网页展示,浏览器都经历了什么?
详细介绍:老生常谈-从输入url到页面展示到底发生了什么 (1)一次完整的HTTP事务的过程 基本流程: a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务 ...
- wpf样式与行为
- WPF 动画执行后属性无法修改
在做了一个类似QQ展开的动画时,设置了TopProperty,通过改变Window.Top属性来实现展开特效, 但是动画执行了之后,再去设置Window.Top的时候发现修改不了,代码调试后发现值设置 ...