Ответы пользователя по тегу JavaScript
  • Как сделать невозможным заполнять второй input, если первый пустой?

    @antpv
    let first = document.getElementById('firstInput'); //первое поле
    let two = document.getElementById('twoInput'); //второе поле
    
    function preventInput(input) {
    	input.addEventListener('keydown', handler)
    }
    
    function unPreventInput(input) {
    	input.removeEventListener('keydown', handler)
    }
    
    function handler(e) {
    	e.preventDefault();
    }
    
    preventInput(two);
    
    first.addEventListener('change', function(e) {
    	if (e.target.value == '') {
    		preventInput(two);
    	} else {
    		unPreventInput(two);
    	}
    })


    Можно в событии change, заменить строчку с проверкой на такую:
    if (e.target.value.lenght < N)
    Тогда второе поле будет разблокировано после N символов в первом поле
    Ответ написан
  • Как в HTML JS проверять наличие какого-то нибудь слова?

    @antpv
    Рабочий пример:

    let input = document.body.firstElementChild;
        let arr = ['test']
    
        function findWord(input, arr, callback) {
            input.addEventListener('input', function (e) {
                arr.forEach(function(item, i, arr) {
                    if (input.value.indexOf(item) >= 0) {
                        callback(item);
                    }
                })
            })
        }
    
    
        function test(item) {
            alert(item)
        }
    
        findWord(input, arr, test)


    Вызываем функцию findWord
    Первый аргумент - input на котором проверять слова
    Второй агрумент - массив слов которые нужно проверить в input
    Третий аргумент - функция которая будет вызвана в случае если найдено слово, эта функция получит в качестве первого аргумента слово которое было найдено
    Ответ написан
    1 комментарий
  • После изменения css через JavaScript hover не работает, что делать?

    @antpv
    Если вы хотите чтобы :hover переопределил ваш собственный стиль, в :hover используйте !important.
    Например:

    #elem:hover{
            background-color: blue !important;
    }
    Ответ написан
    1 комментарий
  • Почему не работает?

    @antpv
    Ты увеличиваешь значение переменной countFieldValue внутри функции changeCount, но не меняешь значение value в DOM. Я добавил функцию render, которая при клике будет обновлять value. Лучше конечно сразу внутри обработчиков это делать.

    function render() {
        countField.value = countFieldValue;
    }
    
    countMinus.addEventListener('click', function() {
        countFieldValue--;
        render()
    });
    
    countPlus.addEventListener('click', function() {
        countFieldValue++;
        render()
    });
    Ответ написан
    2 комментария
  • Как в jQuery определить ширину текста внутри input?

    @antpv
    Держи функцию. Не уверен что правильно понял вопрос, функция возвращает длинну текста внутри input, а если его нет то длинну placeholder.

    function getWidth(id) {
    		let input = document.getElementById(id)
    		let fontSize = getComputedStyle(input);
    		let newSpan = document.createElement('span');
    		newSpan.style.fontSize = fontSize;
    		newSpan.style.margin = '0px';
    		newSpan.style.padding = '0px';
    		newSpan.innerHTML = input.value || input.getAttribute('placeholder');
    		document.body.appendChild(newSpan);
    		let width = newSpan.offsetWidth;
    		newSpan.remove()
    		return width;
    	}
    
    	let elem = document.getElementById('ID') //ID инпута
    	let width = getWidth(elem) //переменная будет равна длинне в px
    Ответ написан
    Комментировать