Question

所以我有一个代码组件，可以处理五个不同的输入字段，其中两个是Floats，它们可以完美工作，而其他三个是Integer，仅我找不到在整数字段中显示（。）Dot的方法当我键入时。

<input
type="number" 
name={name} 
value={value} 
onChange={handleChange}/>

const handleChange = (e) => {   
      const { parseType } = props; // This passes either 'int' or 'float'

      if (validateFloatInt(e.target.value, parseType)) {
        props.updateProjectProperties(e.target.name, 
        e.target.value.replace(/^0+/, '') || 0); 

        //This is to remove the default 0 value from the start and Irrelevant and I convert it from String to Number in next component
//The e.target.value which is sent to updateProjectProperties is the value which goes to input's value
    }   
};

const validateFloatInt = (value, type) => {
    if ((type === 'float' && (value % 1 !== 0) && (value.length <= 9)) || (type === 'float' && (value % 1 === 0) && (value.length <= 6))) {
      return true;
    } if ((type === 'int' && value.length <= 6 && (value % 1 === 0))) {
      return true;
    }
    return false;
  };

因此，Float Box可以完美运行。但是在Integer Box中，当我键入“ 55”时。显示dot（。），当props.parseType ==='int'

时，我想隐藏dot（。）

Answer 1

您可以允许或禁止某些按键的输入形式。使用此代码，您仅允许数字行按钮，数字键盘数字按钮和某些导航按钮。

$(document).on("keydown", ".my-int-input-field", function (e) {
        if ((e.keyCode < 48 || e.keyCode > 57) //numbers
            && e.keyCode !== 96 //keypad numbers
            && e.keyCode !== 97
            && e.keyCode !== 98
            && e.keyCode !== 99
            && e.keyCode !== 100
            && e.keyCode !== 101
            && e.keyCode !== 102
            && e.keyCode !== 103
            && e.keyCode !== 104
            && e.keyCode !== 105
            && e.keyCode !== 8 //backspace
            && e.keyCode !== 13 // ender
            && e.keyCode !== 9 //tab
            && e.keyCode !== 37 // left arrow
            && e.keyCode !== 39 //right arrow
            && e.keyCode !== 46 //delete
                ) {
            e.preventDefault();
        }
    });

注意。可能是将输入设置为type =“ number”并防止按点号和逗号（记住数字键盘中也有逗号）会更容易（在这种情况下，您可能还希望设置step =“ 1”）。这里的一些键码表https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 2

这种方法无法防止复制和粘贴。

function numberOnly(event) {

	switch (event.target.dataset.mytype) {
	case 'int':
		if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(event.key)) {
			return true;
		} else {
			return false;
		}
		break;
	case 'float':
      console.log(event.target.value);
		if (event.key === '.') {
			if(event.target.value.includes('.')){
				return false;
			}else{
				return true;
			}			
		}
		else {
			if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(event.key)) {
				return true;
			} else {
				return false;
			}
		}
		break;
	default:
		break;
	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
Enter your int: <input type="text" data-mytype="int" onkeypress="return numberOnly(event)"/>
<br>
Enter your float: <input type="text" data-mytype="float" onkeypress="return numberOnly(event)"/>
</body>
</html>

我想禁用点（。）从输入显示

2 个答案: