Я хочу отключить отображение точки (.) На дисплее ввода - PullRequest
Новая
       10

Я хочу отключить отображение точки (.) На дисплее ввода

0 голосов
/ 28 января 2019

Итак, у меня есть компонент кода, который обрабатывает пять различных полей ввода, два из них - Float, которые работают отлично, но другие три - только целочисленные. Я не могу найти способ сделать (.) Точку показа в целочисленном поле.когда я печатаю. 

<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. 'точка (.) отображается, я хочу скрыть точку (.), когда props.parseType === 'int'

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Этот способ не может предотвратить копирование и вставку. 

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>
0 голосов
/ 28 января 2019

Вы можете разрешить или запретить некоторые нажатия клавиш для формы ввода.С помощью этого кода вы можете использовать только кнопки с номерами, цифровые кнопки и некоторые кнопки навигации. 

$(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" и запретить нажатие точек и запятых (помните, что в numpad есть также запятая), также вы, вероятно, хотели бы установить step = "1" в этом случае.Вот таблица некоторых кодов клавиш https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...