Question

下面的代码段会在点击时向页面添加一个表单：

$(document).ready(function () {
  $(".reply").click(function () {
    var form = '<form id="rform" action="/sendme" method="POST"><input class="title" name="title" type="text" /><textarea rows="8" name="body"></textarea><input type="submit" value="Submit"></form>';
    $(".placeholder").append(form);
  });
});

到html：

 <a class="reply" href="#">Reply</a>
<div class="placeholder">

Reply链接可以显示在页面上的任何位置。问题在于，在追加表单之后，浏览器跳到页面顶部。

我想知道附加表单后如何滚动/聚焦到title输入字段。

我尝试在focus()之后添加scroll()或.append(form)，但是没有一个起作用。我也搜索过SO，但找不到类似问题的有用答案。

Answer 1

$(document).ready(function() {
  $(".reply").click(function(event) {
    event.preventDefault();
    $('.placeholder').html('');
    var form = '<form id="rform" action="/sendme" method="POST"><input class="title" name="title" type="text" /><textarea rows="8" name="body"></textarea><input type="submit" value="Submit"></form>';
    $(".placeholder").append(form);
    $("input.title").focus();
  });
});

input,
textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

form {
  max-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="reply" href="#">Reply</a>
<div class="placeholder"></div>

首先，如果您不希望它滚动到顶部。使用event.preventDefault();

第二，如果您不想在点击时重复评论，请使用$('.placeholder').html('');。

third，$("input.title").focus();可以正常工作。已经测试

Answer 2

使用此代码有效

  $("[data-scroll-to]").click(function() {
   var form = '<form id="rform" action="/sendme" method="POST"><input class="title" id="id2" name="title" type="text" /><textarea rows="8" name="body"></textarea><input type="submit" value="Submit"></form>';
      $("#id1").append(form);


  var $this = $(this),
      $toElement      = $this.attr('data-scroll-to'),
      $focusElement   = $this.attr('data-scroll-focus'),
      $offset         = $this.attr('data-scroll-offset') * 1 || 0,
      $speed          = $this.attr('data-scroll-speed') * 1 || 500;

  $('html, body').animate({
    scrollTop: $($toElement).offset().top + $offset
  }, $speed);
  if ($focusElement) $($focusElement).focus();

});

https://codepen.io/Thaks123/pen/byWmGo?editors=1111

它也可以与滚动一起使用。

Answer 3

该页面跳转至顶部，因为您正在导航至锚点。从href="#"链接中删除reply。您可以将其替换为href="javascript:void(0);"

然后您应该可以使用.focus()将页面放置在您喜欢的位置。

将其添加到dom后如何关注表单输入？

3 个答案: