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分钟入门教程

时间: 2024-10-12 22:25:21

JavaScript实现,控制一个文本框只能输入正整数,如输入不符合条件则文本框全部字体标红的相关文章

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示-面试题

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示. html <textarea name="" id="text" cols="30" rows="10" maxLength=10></textarea><br> <span id="span"></span> javascript var str = docum

input输入框只能输入正整数

input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.le

Javascript正则控制文本框只能输入整数或浮点数

这篇文章主要介绍Javascript正则如何控制文本框只能输入整数或浮点数,需要的朋友可以参考下 JS部分代码如下: view source print? 1 function CheckInputIntFloat(oInput)  2 {  3 if('' != oInput.value.replace(/\d{1,}\.{0,1}\d{0,}/,''))  4 {  5 oInput.value = oInput.value.match(/\d{1,}\.{0,1}\d{0,}/) == n

用Jquery控制文本框只能输入数字和字母

只为成功找方法,不为失败找借口! 用Jquery控制文本框只能输入数字和字母 在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,

js正则控制文本框只能输入整数或浮点数的例子

用Javascript正则控制文本框只能输入整数或浮点数. JS部分代码: function CheckInputIntFloat(oInput) { if('' != oInput.value.replace(/\d{1,}\.{0,1}\d{0,}/,'')) { oInput.value = oInput.value.match(/\d{1,}\.{0,1}\d{0,}/) == null ? '' :oInput.value.match(/\d{1,}\.{0,1}\d{0,}/); }

JS 控制文本框只能输入中文、英文、数字与指定特殊符号

想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 JS 控制文本框只能输入数字 input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value

GUI编程笔记(java)09:GUI控制文本框只能输入数字字符案例

1.首先我们看看我的需求,如下: 控制文本框只能输入数字字符 2.源代码: package cn.itcast_07; import java.awt.FlowLayout; import java.awt.Frame; import java.awt.Label; import java.awt.TextField; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.awt.event.W

javascript设置文本框只能输入数字

javascript设置文本框只能输入数字:在很多实际需要中,需要对输入的内容进行限制,比如有些地方只能够输入数字,例如大家经常使用的QQ号码,这个当然当然是数字了,下面就简单介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.s

Js控制文本框只能输入中文、英文、数字与指定特殊符号

JS 控制文本框只能输入数字<input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点<inputonkeyup="value=value.replac