在錨點單擊時切換輸入字段

Question

我試圖做到這一點，當用戶單擊“鏈接”時，它會向下滾動到輸入字段“a”並切換它而無需單擊。 我已經在使用 jQuery，所以也許它也應該處理滾動，但是我不確定如何自動處理切換（也許專注於正確的術語）輸入字段。 注意：為了可讀性，我省略了所有其他代碼。

<a href="#view" class="button">Link</a>

<div id="view">
<input type="text" id="a" name="a">
</div>

Answer 1

不確定“切換”是什么意思，但您可以使用focus將光標（移入）移動到輸入字段。 這是輸入字段看不見的片段。 處理是使用事件委托完成的。

 document.addEventListener(`click`, handle); function handle(evt) { if (evt.target.id === `view`) { // if you click from a href element, you have to prevent // the default action of the click. May be advisable to // use a button here. evt.preventDefault(); const inpVw = document.querySelector(`#a`); // focusing automatically scrolls to the field inpVw.focus(); inpVw.setAttribute(`placeholder`, `Feel free to type`); } }

 #viewInput { margin-top: 120vh; }

 <a id="view" href="#">Link</a> <p id="viewInput"> <input type="text" id="a" name="a"> </p>

Answer 2

添加一個空的錨標簽：

<div id="view">
<input type="text" id="a" name="a">
<a name="myawesomeanchour"></a>
</div>

然后將事件處理程序添加到“鏈接”按鈕：

var myawesometag = $("a[name='myawesomeanchour']");
$('html,body').animate({scrollTop:myawesometag.offset().top},'slow');
$('#a').toggle();

如果仍然不需要切換，請移除切換線。