首页 > 试题广场 >

请用JavaScript实现，控制一个文本框只能输入正整数，

[问答题]
请用JavaScript实现，控制一个文本框只能输入正整数，如输入不符合条件则文本框全部字体标红。要求写出完整的文本框HTML代码和JavaScript逻辑代码。
添加回答
bleedgreen头像 bleedgreen 
<html>
<body>
<input type="text" onblur="checknum(this)"/>
<script type="text/javascript">
function checknum(obj){
  if(obj.value.match(/^[1-9]\d*$/)==null){
    obj.style.color = "red";
  } else {
    obj.style.color = "black";
  }
}
</script>
</body>
</html>
编辑于 2015-06-02 20:15:38 回复(1)
更多回答
推荐
Sneezry.Lee头像 Sneezry.Lee
HTML: 
<input type="text" />

JavaScript: 
document.getElementsByTagName('input')[0].onkeyup = function(){
 if(this.value && !/^\d+$/.test(this.value)){
  this.style.color = 'red';
 }
 else{
  this.style.color = 'black';
 }
}

编辑于 2015-06-18 16:45:42 回复(3)
白。。离头像 白。。离
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script>
        function onc(){
            var t1=document.getElementById('t1').value;
            var regexp=/^[1-9]\d*$/;
            if(regexp.test(t1)){
                document.getElementById('t1').style.color='black';
                }else{
                    document.getElementById('t1').style.color='red';
                    }
            }
    </script>
</head>

<body>
    <input type="text" id="t1" onkeyup="onc()"/>
</body>
</html>

发表于 2015-06-02 21:38:23 回复(0)
刚丝府头像 刚丝府
HTML 
<input type="text" id="text">
Javascript 
document.getElementById("text").addEventListener("input", function(){
    this.style.color = /^[1-9]\d*$/.test(this.value) ? "#000" : "#f00";
},false);
以上,未做低版本浏览器的兼容性处理,在线看:http://output.jsbin.com/kojuwayafi
编辑于 2015-06-03 16:46:22 回复(0)
ui醉醉头像 ui醉醉 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        
        <script type="text/javascript">
        <!--
            function isNum() {
                var txtField = document.getElementById('txt');
                var txt = txtField.value;
                var regexp = /^\d*$/;
                if (regexp.test(txt)) {                                                                                    
                    txtField.style.color = "#000";
                } else {
                    txtField.style.color = "#f00";
                }
            }
        //-->
        </script>
    </head>
    
    <body>
        <input id="txt" type="text" onKeyUp="isNum();" />
    </body>
</html>
不知道合不合要求，新手一枚哈
编辑于 2015-06-02 10:59:02 回复(0)
赖聪林头像 赖聪林
我在这里用了jQuery的一些东西，并且结合了上面的那位的一些方法。
HTML： 
Input: <input class="positive_integer" type='number' min='1' required>

CSS： 
.input_error {
    border-style: solid;
    border-color: red;
}

JavaScript（jQuery） 
$(function() {
    $("input.positive_integer").on("keyup change", function(event) {
        //check input number
        var val = $(this).val();
        if(val != '') {
            if(!is_positive_number(val)) {
                $(this).addClass("input_error");
            } else {
                $(this).removeClass("input_error");
            }
        } else {
            $(this).removeClass("input_error");
        }
    });
    function is_positive_number(num) {
        console.log(num);
        if(num == 0) {
            return 0;
        }
        if(num && /^\d+$/.test(num)) {
            return 1;
        } else {
            return 0;
        }
    }
});

http://jsfiddle.net/cno8092z/4/
通过上面的jsfiddle可以直接查看效果。




发表于 2015-01-30 11:24:44 回复(0)
牛客763117805号头像 牛客763117805号
 document.querySelector("input").addEventListener('keyup', fn);
    function fn() {
        let pattern = /^[1,9]\d*$/;
       //以1到9的的某位数字开始并以一位或者多位或者零位数字结尾

        if (pattern.test(this.value)) {
            this.style.color = "black";
        } else {
            this.style.color = "red";
        }
    }
发表于 2022-04-30 21:29:49 回复(0)
挣钱买包包头像 挣钱买包包
window.onload = function(){
        var oInput = document.getElementById("text");
        oInput.oninput = function(){
            var value = oInput.value;
            var flag = true;
            flag = /^[1-9]\d*$/.test(value);
            if(!flag){
                oInput.style.color = "red";
            }else{
                oInput.style.color = "black";
            }
        }
    }
发表于 2016-08-18 15:52:39 回复(0)
张大叔头像 张大叔
  window.onload=function(){
      ke();
      }
      
      
      
      var z=/^[0-9]*[1-9][0-9]*$/;
      function ke(){
            var text=document.getElementById("text");
            text.onkeyup=function(){
                  var val=text.value;
                  if(!z.test(val)){
                     text.style.color="red";   
                    }else{
                      text.style.color="black";
                    } 
                }
          }
发表于 2015-06-10 09:13:15 回复(0)
xixihaha头像 xixihaha
window.onload = function () {
        var input = document.getElementById("input");
        //onkeyup也可以 oninput IE8 不支持
        input.oninput = function(){
            if(!(/^\d*$/.test(input.value))){
                input.style.color = 'red';
            }
            else{
                input.style.color = 'black';
            }
        }
    }
发表于 2015-06-09 19:24:28 回复(0)
lq_neteast_lq头像 lq_neteast_lq
/^[1-9]*$/
发表于 2015-06-09 14:38:39 回复(0)
HappyAimee头像 HappyAimee
oninput事件会比onkeyup事件好，可以防止用鼠标粘贴进来。 

 <!doctype html>
<html>
<head>
    <script type="text/javascript">
        function isInt() {
            var regexp = /^\d*$/;
            var inputField = document.getElementById('input');
            if (!regexp.test(inputField.value)) {
                inputField.style.color='red';
            } else {
                inputField.style.color='black';
            }
        }
    </script>
    <style type="text/css">
        #input {
            position: absolute;
            width: 40%;
            height: 6%;
            top:47%;
            left:30%;
            padding: 9px 7px;
            padding: 11px 7px 7px\9;
            font: 16px arial;
            border: 1px solid #d8d8d8;
            border-bottom: 1px solid #ccc;
            vertical-align: center;
            outline: none;
        }
    </style>    
</head>
<body>
    <input id="input" type="text" oninput="isInt();" />
</body>
</html>


编辑于 2015-06-02 22:27:22 回复(0)
valaxy头像 valaxy
POINTS:
- input(type="number")
- input.valueAsNumber, except big integer
- color: red
- input event
编辑于 2015-06-02 21:28:13 回复(0)
帕瞳瞳~头像 帕瞳瞳~

18:51:15
黄海潮 2015/6/2 18:51:15

我试下
19:42:08
黄海潮 2015/6/2 19:42:08

<html>

   <head>
   <title>输入框验证</title>
   <script type="text/javascript">
     
 function check(){
    
      var number = document.getElementById("number").value;
  var number2=number.match("[0-9]+");
  
      if (number2.toString().length!=number.length){
      document.getElementById("number").style.color='red';
  }

 }
 
   </script>

   </head>
    <body>
    <input type="text" name="value" id="number"  />
<input type="button"  value="确认" onclick="check()">
</body>


<ml>

发表于 2015-06-02 19:43:48 回复(0)
joe_lwc头像 joe_lwc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" >
    function isum(){
  var text=document.getElementById("aa");
  var ts= /^\d*$/;
  if(!ts.test(text.value)){
    text.style.color='red';
  }
  else{
   text.style.color='green';
   }
 }
</script>
</head>

<body>
  <input type="text" id="aa" onblur="isum()"/>
</body>

发表于 2015-06-02 19:10:45 回复(0)
Yaphets强神头像 Yaphets强神
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">

function asd(){
    
    var text=document.getElementById("q")

    for(var i=0;i<text.value.length;i++){
            
        var a=text.value.substring(i,i+1)
            if(isNaN(a)){
                text.style.color="red"
                }
            
            
        }
    }    
</script>
<body>
<div>
<input type="text" id="q" onkeyup="asd()"  />
</div>
</body>
</html>
发表于 2015-06-02 16:55:28 回复(0)
zw0283头像 zw0283
HTML:
<input type="text" id="testInput" onkeyup="test()">
JS:
var text = document.getElementById('testInput');
var textValue = text.value;
var reg = /^(0|\+?[1-9][0-9]*)$/;
function test(){
    if(reg.test(textValue)){
        text.style.color = 'red';
    } else {
        text.style.color = 'black';
    }
}

发表于 2015-06-02 15:49:58 回复(0)
牛客901061号头像 牛客901061号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function toRed(){
 var txt=document.getElementById("txt");
 var pattern=/^[1-9]+$/;
 if(pattern.test(txt.value)){
  txt.style.color="black";
 }else{
  txt.style.color="red";
 }
}
</script>
</head>
<body>
 <input type="text" id="txt" onkeyup="toRed()" />
</body>
</html>
发表于 2015-06-02 15:49:26 回复(0)
王少星头像 王少星 
<!DOCTYPE html>
<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <input type="text" id="digit" placeholder="input a number"/>
        <script>
        (function() {
            var input = document.getElementById("digit");
            input.addEventListener('keyup',function(e){
                val = e.target.value;
                console.log(val);
                pattern = /^[0-9]*$/;
                if (pattern.test(val)) {
                    e.target.style.color = "inherit";
                } else {
                    e.target.style.color = "#f00";
                }
            },false);
        })();
        </script>
    </body>
</html>

编辑于 2015-06-02 15:29:00 回复(0)
聆听节奏头像 聆听节奏
<html>
<head>
<title>输入正整数</title>
<style>
.normal{
    color:black;
}
.error{
    color:red;
}
</style>
<script language="javascript">
function checkInput(obj,val){
    if(val==null || val==""){
        return;
    }
    if(val*1==val){
        if(val>0){
            obj.className="normal";
            return;
        }
    }
    obj.className="error";
}
function returnClass(obj){
    obj.className="normal";
}
</script>
</head>
<body>
<h1>请输入一个正整数</h1><br/>
<input type="text" value="" class="normal" onblur="checkInput(this,this.value);" onfocus="returnClass(this);"/>
</body>
</html>
发表于 2015-06-02 13:39:54 回复(0)
星陨无痕头像 星陨无痕
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
<div id="main">
    <div id="inputframe">
    <input id="number" type="text" onKeyUp="isNumber();">输入非正数为红色
    </div>
</div>
 </BODY>
 <script type="text/javascript">
    function isNumber(){
    var ob = document.getElementById('number');
    var v = Number(ob.value);
    if(isNaN(v)){
        ob.style.color = "red";
    }else{
        if(v<0){
            ob.style.color = "red";
        }else{
            ob.style.color = "black";
        }
    }
    }
 </script>
</HTML>

发表于 2015-06-02 11:55:47 回复(0)
提交观点

问题信息

腾讯 Javascript HTML
上传者：macao
难度：
24条回答 25364浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号