单击输入字段后交换按钮

Question

我正在尝试对我在那里发现的一些预先存在的代码进行逆向工程，运行遇到了麻烦。

我希望在用户将光标单击到旁边的表单域时，按钮从 "Skip" 变为 "Enter"。因此，他们在第一次查看时会看到 "Skip"，但一旦他们开始输入，按钮就会变为 "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 会根据单击 visitor-name-input 的时间换出 skip-btn 和 enter-btn？某种切换？

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 个 link 并替换内部 img src 值

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

JSFIDDLE

单击输入字段后交换按钮

Swap out button once input field is clicked-into

jquery

button

textinput