Я пытаюсь удалить все пробелы, когда пользователь вводит что-то в поле ввода.Сначала я попытался использовать 3 отдельных метода: регулярное выражение для удаления пробелов при вставке текста, один для нажатия пробела и простой обрезки.ПРИМЕЧАНИЕ: требуется, чтобы я использовал класс для вызова методов.не уверен, куда идти отсюда ... я ценю помощь!спасибо:)
(function () {
class Digit {
// when user enters keys, do not allow spaces
method2(userInput) {
console.log({userInput});
console.log("formatInput");
const input = userInput.target.value;
console.log(input.length);
if (!input.length) return;
if (userInput.which === 32) { // 32 is space key
console.log("this is a space");
userInput.value = this.method1();
}
}
method1() {
console.log("trimthis input");
return userInput.trim();
}
// when user pastes input remove spaces
method3() {
console.log("formatPaste");
const reg = new RegExp(/\s+/, "");
console.log(this.userInput);
return this.userInput.replace(reg, "");
}
}
const userInput = document.querySelector("#inputNumber");
console.log("User inputs", {userInput});
const digitObject = new Digit();
console.log(digitObject);
userInput.addEventListener("keyup", function() { digitObject.method2(); }, false);
digitObject.method3();
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Numbers App</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ASSIGNMENT: create page where user can type/save numbers only, css grid -->
<div class="wrapper">
<!-- simple form with number input and submit function, auto trim spaces -->
<form>
<div class="form">
<div>
<input class="input--number has-float-label go-bottom Digit" id="inputNumber" placeholder="Enter Number" type="text" required />
<label for="inputNumber">Input</label>
</div>
<div class="btn--group">
<input type="button" value="Post" class="btn post" title="Post">
<input type="button" value="Clear" class="btn clear" title="Clear">
</div>
</div>
</form>
<!-- saved numbers table with date submitted -->
<!---->
</div> <!-- end wrapper -->
<!-- footer -->
<!-- Javascript -->
<script src="script.js"></script>
</body>
</html>