코멘트 입력할 때, 스크롤 이동 문제.
본문
게시판 스킨에서 코멘트를 제출하면 스크롤이 가장 하단으로 이동하는데...
아무리 바꾸려 해봐도 잘 안되어서..
코멘트 입력창에 머무르고 싶은데.. 제출을 누를때마다.. 아래로 가는게..
너무 스트레스입니다.
해결책 좀 알려주시면 감사하겠습니다.
답변 2
댓글을 제출하면 자동으로 페이지가 가장 하단으로 이동하는 문제를 방지하려면,
/js/common.js에서 댓글 작성 폼(form[name=fwrite])의 제출 이벤트를 가로채어
AJAX로 처리하고, 성공 후 $("#wr_content").focus();를 호출하여 입력 창에 머무르게 함.
이를 위해 event.preventDefault();로 기본 폼 제출 동작을 막고,
FormData를 사용해 댓글 데이터를 서버로 전송한 뒤,
응답이 완료되면 자동 스크롤을 방지한 채 댓글 입력 창을 유지하도록 수정.
*/js/common.js의 아래 블럭에
$(function() {
$(document).on("click", "form[name=fwrite] input:submit, form[name=fwrite] button:submit, form[name=fwrite] input:image", function() {
var f = this.form;
if (typeof(f.bo_table) == "undefined") {
return;
}
var bo_table = f.bo_table.value;
var token = get_write_token(bo_table);
if(!token) {
alert("토큰 정보가 올바르지 않습니다.");
return false;
}
var $f = $(f);
if(typeof f.token === "undefined")
$f.prepend('<input type="hidden" name="token" value="">');
$f.find("input[name=token]").val(token);
return true;});
});
$(function() {
$(document).on("submit", "form[name=fwrite]", function(event) {
event.preventDefault(); // 기본 폼 제출 방지
var f = this;
var formData = new FormData(f);
$.ajax({
url: f.action,
type: f.method,
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 댓글 입력 후 자동 스크롤 방지
$("#wr_content").focus();
// 기존 댓글 리스트 갱신 (선택 사항)
$("#comment_list").load(location.href + " #comment_list > *");
},
error: function() {
alert("댓글을 등록하는 중 오류가 발생했습니다.");
}
});
});
});
조금 더 구체적으로 설명이 필요하네요. 글로만 봐서는 도움드리기가 좀 에매해서요.