Question

我在使用onkeypress验证文本框时遇到问题。我需要允许文本框只接受1到10之间的数字。我有一部分代码只接受数字，但是应该只接受1到10的数字。我需要限制大于10的数字。请帮我解决这个问题。

{
 "presets": ["env", "react"] 
}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Grid, Row, Col, Table, Panel, Image, Tabs, Tab, Nav, NavItem, Alert} from 'react-bootstrap';
import _ from 'lodash';
import $ from 'jquery';
import Request from 'react-http-request';
import {AdminViewComponent} from './components/AdminViewComponent.js';
import {WholeScreen} from './components/WholeScreenComponent.js';




class App extends Component { 


  render() {

    var url = "./api/user/" + this.props.userName + "/";
    console.log("props = " + JSON.stringify(this.props));
    console.log("url = " + url);
    var userCompanyIcon;
    //if (this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01"){
    if (this.props.tid == "72f988bf-86f1-41af-91ab-2d7cd011db47" || this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01"){
      userCompanyIcon = <Image className="userCompanyIcon" src="microsoftgray.png" responsive/>;
    }


    return (
      <div className="App">
        <div className="App-header">
          <Grid>
          <Row>
          <Col xs={6} sm={6} md={6}>                       

          </Col>
          <Col xs={2} sm={2} md={2}>

          </Col>
          <Col xs={4} sm={4} md={4}>

            <div className="Hello">Hello, {this.props.fisrtName} </div>                       
          </Col>

          </Row>
          <Row>
            <Col xs={4}  sm={4}  md={4}  >
              {userCompanyIcon}
            </Col>
            <Col xs={4}  sm={4}  md={4}  >

            </Col>
            <Col xs={4} sm={4} md={4}>                       
              <Image className="companyIcon" src="MatanTransperent.png" responsive />              
            </Col>
          </Row>
          </Grid>                    
        </div>   


        <div className="App-content">

         <Request
          url= {url}
          method='get'
          accept='application/json'
          headers={{'Authorization': 'Bearer ' + this.props.token}}
          verbose={true}>
          {
              ({error, result, loading}) => {
                if (loading) {
                  return <div>loading...</div>;
                } else {
                  if (result == null || result.statusType == 4 ||result.statusType == 5){
                    return <div> an unknown error has occured.  </div>;
                  }
                  else{
                    var returnObject = JSON.parse(result.text);
                    if (returnObject.isAdmin == false){
                      return <WholeScreen data {returnObject.DonationsList}/>;
                    }
                    else if (returnObject.isAdmin == true){
                      return <AdminViewComponent token={this.props.token}/>;

                    }
                  }
                }
              }
            } 
          </Request>-
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

这似乎很棘手，但是可以解决问题：

function digitKeyOnly(e) {
  var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
  var value = Number(e.target.value + e.key) || 0;

  if ((keyCode >= 37 && keyCode <= 40) || (keyCode == 8 || keyCode == 9 || keyCode == 13) || (keyCode >= 48 && keyCode <= 57)) {
    return isValidNumber(value);
  }
  return false;
}

function isValidNumber (number) {
  return (1 <= number && number <= 10 )
}

<input class="text" name="Serial_Num" type="text" id="SrNo" size="2" maxlength="2" onkeypress="return digitKeyOnly(event)" />

Answer 2

最简单的方法是将texbox中的条目变成一个数字，然后：

if (1 <= number && number <= 10 ) {
    true;
}

Answer 3

您可以使用输入类型作为数字来解决此问题，并在javascript中使用DOM获取数字

input {
    margin: 1rem 0;
}

label {
    display: inline-block;
    font-size: .8rem;
}

input:invalid + span:after {
    content: '✖';
    color: #f00;
    padding-left: 5px;
}

input:valid + span:after {
    content: '✓';
    color: #26b72b;
    padding-left: 5px;
}

<input type="number" id="eyes" name="eyes"
           placeholder="Min: 10, max: 100"
           min="1" max="10" />
    <span class="validity"></span>

Answer 4

根据streletss答案，并基于MaxLength属性，代码将如下重写：

<input type="text" maxlength="5" onkeypress="return digitKeyOnly(event,this)">


function digitKeyOnly(e,eln) {       
    var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
    var value = Number(e.target.value + e.key) || 0;       
    if ((keyCode >= 37 && keyCode <= 40) || (keyCode == 8 || keyCode == 9 || keyCode == 13) || (keyCode >= 48 && keyCode <= 57)) {
        return isValidNumber(value, eln.maxLength);
    }
    return false;
}

function isValidNumber(number, len) {
    return number.toString().length <= len ? true : false;       
}

Onkeypress编号验证从1到10

4 个答案: