Как переписать этот код и организовать функцию?

Question

[lavezzi1]

Здравствуйте, коллеги. Не так давно начал работать с JQuery и с JS в целом. Написал вот такой код:

Суть в том, что при клике на инпут вылазит кнопка. Интересно, как можно сократь\переписать код? С учетом того, что таких инпутов будет штук 20.

И почему не работает функция on('change')? Если я хочу чтобы кнопка появлялось только когда в инпуте написали.

Буду очень благодарен за ответы и рекомендации!

Answer 1

[Кирилл Туровников]

Например так codepen.io/anon/pen/MapRxw

Comments

[lavezzi1]

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

Answer 2

[Виталий Инчин ☢]

Повесить общий обработчик на форму и объединить все кнопки 1 классом (.send_button). Кнопки, кстати, лучше положить в .form_group, это будет логичнее. И тогда:

$("form").on("focus", ".form_group > input", function(){
   $(this).next(".send_button").fadeIn();
}).on("blur", ".form_group > input", function(){
   $(this).next(".send_button").fadeOut();
});

И почему не работает функция on('change')? Если я хочу чтобы кнопка появлялось только когда в инпуте написали.

«Когда в инпуте написали» - это oninput, а onchange это изменение + потеря фокуса.

Comments

[lavezzi1]

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

[Виталий Инчин ☢]

lavezzi1: за место onblur ставьте onclick по кнопке.

[lavezzi1]

Виталий Инчин ☢: не работает чего то codepen.io/anon/pen/pjeBqo

[Виталий Инчин ☢]

lavezzi1:

onclick по кнопке.

Answer 3

[Алексей Царапкин]

codepen.io/anon/pen/zvZXbo
Может лучше keydown?