0

Есть поле ввода в форме и кнопка — обычный input submit.

Требуется, чтобы когда поле пустое, на кнопке была одна надпись, а как только начали вводить данные - изменилась на другую. А если данные стереть из поля - тут же должна появиться первая надпись на кнопке, когда данных еще не было.

Вопрос сводится просто к тому, как примерно построить алгоритм и что именно лучше использовать. Пробовал change и keypress JQuery, но немного не то получается.

1
  • А что не так с keypress?
    – Vartlok
    9 сен 2015 в 12:42

2 ответа 2

1

Попробуйте так:

<input type="text" name="" class="inp">
<input type="submit" value="I'm button" class="btn">

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
$('document').ready(function() {
    $('.inp').on('keyup', function(e) {
        var btnVal = ($(this).val()) ? "I'm changed button" : "I'm button";
        $('.btn').val(btnVal);
    });
});
</script>
2
  • keyup не вызывается при использовании контекстного меню (например, вырезать). В новых браузерах лучше использовать change. 9 сен 2015 в 12:50
  • Сработало, огромное спасибо! 10 сен 2015 в 3:49
-1

Решение на чистом JS:

https://jsfiddle.net/11111000000/mtpfq5t9/2/

var 
  input = document.querySelector('input')
  , button = document.querySelector('button')
  , textOne = 'Введите что-нибудь'
  , textTwo = 'Спасибо';

input.addEventListener('keyup',function(event) {
    if(!this.value || this.value.trim() == '') {
      button.innerText = textOne; 
    } else {
      button.innerText = textTwo;    
    }
});

По-поводу оптимального пути решения подобных задач, смотрите в сторону двух-стороннего биндинга (two-way data binding). Есть фреймворки, есть и микробиблиотеки.

5
  • keyup не вызывается при использовании контекстного меню (например, вырезать или вставить). В новых браузерах лучше использовать change. 9 сен 2015 в 14:39
  • А еще, button.innerText не работает, например, в firefox. Вы бы хотя бы предупредили, что ваше решение не кроссбраузерное. 9 сен 2015 в 14:41
  • Для решения проблем кроссбраузерности нужно задать другой вопрос. Моё решение - чистое, простое и верное, отражает суть вопроса. Насчёт keyup вы уже отписали выше, это действительно верно, общеизвестно, но абсолютно никакого отношения не имеет к сути вопроса, вы просто как будто кичитесь граблями, на которые наступили ) 9 сен 2015 в 14:51
  • Я и сказал, что вы стоило хотя бы упомянуть о том что код не кроссбраузерный. А про change, так это событие даже в вопросе упоминается. 9 сен 2015 в 14:55
  • Большое спасибо за решение 10 сен 2015 в 3:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.