Сменить кнопку после ввода поля ввода в

Question

Я пытаюсь перепроектировать какой-то уже существующий код, который я обнаружил там, и у меня проблемы.

Я хочу, чтобы у вас не было кнопки «Пропустить» до «Ввод», когда пользователь нажимает на свой курсор в поле формы рядом с ним. Таким образом, на первый взгляд они видят «Пропустить», но как только они начинают вводить изменения кнопки на «Enter»

<input type="text" id="visitor-name-input" placeholder="what's your name?"> 
<a id="skip-btn" href="#"><img src="skipbtn.png" height="50px"/></a> 
<a id="enter-btn" href="#"><img src="enterbtn.png" height="50px" /></a> 

Так мне интересно, какая JQuery приведет замена из skip-btn и enter-btn на основе, когда visitor-name-input является нажал? Какой-то переключение?

Answer 1

Вы можете использовать метод focus(), когда пользователь щелкает в текстовом поле

HTML (Изменено на кнопки, чтобы не беспокоиться об изображениях)

<input type="text" id="visitor-name-input" placeholder="what's your name?"> 
<button id="skip-btn" href="#">Skip</button> 

JQuery

$("#visitor-name-input").focus(function() { 
    $('#skip-btn').text('Enter'); 
}); 

JSFIDDLE

Для того, чтобы вы по-прежнему использовали свое воображение эс, то вы можете просто 1 ссылку и заменить внутреннюю IMG src значения

$("#visitor-name-input").focus(function() { 
    $('#skip-btn img').attr('src', 'enterbtn.png'); 
}); 

JSFIDDLE