私はプロジェクトに取り組んでいます.複数のdivがあるdivがあり、各divには(DBからの)一意のIDがあり、各divには以下のようなコメントを追加するためのテキストボックスが含まれています
<div id="maindiv">
<div id="@item.resid">
<p>Content1</p>
<input type="text" class="txtarea" resourceid="@item.resid"/>
</div>
<div id="@item.resid">
<p>Content2</p>
<input type="text" class="txtarea" resourceid="@item.resid"/>
</div>
<div id="@item.resid">
<p>Content3</p>
<input type="text" class="txtarea" resourceid="@item.resid"/>
</div>
<div id="@item.resid">
<p>Content4</p>
<input type="text" class="txtarea" resourceid="@item.resid"/>
</div>
. . . .
テキストボックスのキープレスイベントでコメントを追加しています。問題は、下側のコンテンツにコメントを追加すると、フォーカスを追加した後にトップになることです。私はテキストボックスとdivにさえ焦点を合わせようとしましたが、うまくいきませんでした:(以下はコメントを追加する私のコードです
$(".txtarea").keypress(function (e) {
if (e.keyCode == 13) {
if ($(this).val().trim() != "") {
var commentText = $(this).val();
var resourceid = $(this).attr('resourceid');
var divId = "." + resourceid;
$.ajax({
url: ResourceAjaxUrl.AddNewCommentOnResources,
type: "POST",
data: JSON.stringify({ resourceID: resourceid, commentText: commentText }),
dataType: "html",
contentType: "application/json; charset-utf-8",
success: function (Result) {
$('#maindiv').html(Result);
$('#maindiv div#' + divId.split('.')[1]).focus();
$('#maindiv div#' + divId.split('.')[1]).find(".txtarea").focus();
},
error: function (msg) {
alert("Unable to save comment in");
}
});
}
else {
$(this).val('');
$(this).focus();
}
}
});
開発者ツールで focus() 行を見たことがありますが、正常に動作していますが、まだ焦点が合っていません。下側 (または最後の) コメントにコメントを追加すると、上に移動するのではなく、その上にフォーカスが留まります。