Удаление всего пробела из поля ввода, es6

Я пытаюсь удалить все пробелы, пока пользователь вводит что-то в поле ввода. Сначала я попробовал использовать три отдельных метода: регулярное выражение для удаления пробелов при вставке текста, один для нажатия клавиши пробела и простая обрезка. ПРИМЕЧАНИЕ: требуется, чтобы я использовал класс для вызова методов. Не знаю, куда идти ... Я ценю помощь!

(function () {
class Digit {

// when user enters keys, do not allow spaces
    
    method2(userInput) {
        console.info({userInput});
        console.info("formatInput");
        const input = userInput.target.value;
        console.info(input.length);
        if (!input.length) return;  
        if (userInput.which === 32) { // 32 is space key
            console.info("this is a space");
            userInput.value = this.method1();
        } 
    }

    method1() {
        console.info("trimthis input");
        return userInput.trim(); 
    }

// when user pastes input remove spaces
    method3() {
        console.info("formatPaste");
        const reg = new RegExp(/\s+/, "");
            console.info(this.userInput);
            return this.userInput.replace(reg, "");
    }
}

const userInput = document.querySelector("#inputNumber");
console.info("User inputs", {userInput});
const digitObject = new Digit();
console.info(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>

В вашем методе 3 нет таких вещей, как this.userInput, у класса Digit нет userInput. И при связывании метода 2 с событием keyUp вы ничего не передаете, поэтому метод 2 получает неопределенный userInput.

— 24.10.2018 15:03

да, я это понял, попробовал несколько вариантов, но застрял. : /

— 24.10.2018 15:39

javascript dom-events

24.10.2018 14:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

138

Ответы 1

Используйте событие input, чтобы фиксировать все виды изменений и следующее регулярное выражение / /g

document.getElementById('textfield').addEventListener('input', function() {
  this.value = this.value.replace(/ /g, '');
});

<input id='textfield'>

24.10.2018 14:58

Другие вопросы по теме

Как отличить событие прокрутки от события длительного нажатия?

Как связать многоугольник Google Maps с другим сайтом?

Как добавить прослушиватель событий сразу в несколько тегов

Preactjs, onclick toggler срабатывает дважды

Что такое событие DOM GC?

Захват и обработка события click для bigplaybutton из videojs не работают

В. javascript. почему бы не сыграть в «onclick»?

Почему event.preventDefault () может предотвратить поведение браузера по умолчанию для дочернего элемента?

Замена устаревшего события DOM `keypress`

Как я могу ограничить вызов моей функции 2 раза

Удаление всего пробела из поля ввода, es6

Ответы 1

Другие вопросы по теме

Похожие вопросы