게시판 검색 이 입력란을 작성하세요 수정 문의드립니다.
관련링크
본문
안녕하세요 !
밑 이미지를 게시판 검색시 돋보기를 누르면 뜨는 이입력란을 작성하세요를 영문으로 수정하고
싶은데 경로를 아무리 뒤져봐도 찾지를 못하고있어요.
고수님들 제발 부탁드립니당 어느 파일에서 수정을 해야하는지 도와주세요 ㅠㅠㅠㅠ
답변 2
브라우저 언어 설정에 따라 브라우저가 자동으로 띄우는 메시지라서, 그냥 두시면 됩니다
신비님 말씀대로 브라우저 메시지기때문에 하단검색 스크립트 jQuery(function($) 검색하셔서 이스크립트 안에다 다음과 같이 추가해보세요.
document.querySelector("form[name='fsearch']").addEventListener("submit", function(event) {
var input = document.getElementById("stx");
if (!input.value.trim()) {
event.preventDefault();
alert("이 입력란 을 작성하세요 이것을 원하는 영문으로 바꿔주세요");
input.focus();
}
});
. . . """밑 이미지를 게시판 검색시 돋보기를 누르면 뜨는""" 누르면 뜨는 것이 아니고,
브라우저의 빈 입력창 어디에서나 mouse hover시, 나타나는 메시지입니다.
※ 이 메시지는 브라우저가 클라이언트 언어 설정에 따라 표시하며,
placeholder가 아닌 '브라우저 기본 메시지'를 수정할 필요는 없습니다.
> 브라우저의 빈 입력창 메시지인 "이 입력란을 작성하세요."는
HTML의 required 속성으로 인해 나타나는 기본 메시지입니다.
> 사용자 정의 로직이 있다고 하나,
- 브라우저의 기본 동작을 막고 사용자 정의 메시지를 적용해야할 필요가 있나요?
. . . 아래는 그누보드에서 '검색 경고 메시지'와 placeholder를 변경하는 방법입니다.
- 브라우저의 빈 입력창 메시지("이 입력란을 작성하세요.") 아님.
※ placeholder나 메시지를 개발자가 일관된 사용자 경험(특정 구문)으로 원하는 경우.
개발자가 지정한 내용으로 표시할 수 있습니다.
> 클라이언트가 특정 요청(검색)을 할 때,
브라우저에서 실행되는 HTML 문서 내에 포함되는
Form의 placeholder와 메시지 구문은 변경할 수 있습니다.
※ 검색과 관련된 스킨 파일은 /skin/search/basic/search.skin.php 파일입니다.
- 아래는 5.6.4 기본 소스를 변경한 코드입니다. - 대부분의 버전에 호환 됨.
- 참고하여 수정해 보세요.
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$search_skin_url.'/style.css">', 0);
?>
<!-- 전체검색 시작 { -->
<form name="fsearch" onsubmit="return fsearch_submit(this);" method="get">
<input type="hidden" name="srows" value="<?php echo $srows ?>">
<fieldset id="sch_res_detail">
<legend>상세검색</legend>
<?php echo $group_select ?>
<script>document.getElementById("gr_id").value = "<?php echo $gr_id ?>";</script>
<label for="sfl" class="sound_only">검색조건</label>
<select name="sfl" id="sfl">
<option value="wr_subject||wr_content"<?php echo get_selected($sfl, "wr_subject||wr_content") ?>>제목+내용</option>
<option value="wr_subject"<?php echo get_selected($sfl, "wr_subject") ?>>제목</option>
<option value="wr_content"<?php echo get_selected($sfl, "wr_content") ?>>내용</option>
<option value="mb_id"<?php echo get_selected($sfl, "mb_id") ?>>회원아이디</option>
<option value="wr_name"<?php echo get_selected($sfl, "wr_name") ?>>이름</option>
</select>
<label for="stx" class="sound_only">검색어<strong class="sound_only"> 필수</strong></label>
<span class="sch_wr">
<!--
기존 검색 필드에서 placeholder 추가- 약 27번째 line
사용자 경험을 개선하기 위해 '일관된 사용자 경험(특정 구문)' 메시지를 사용
-->
<input type="text" name="stx" value="<?php echo $text_stx ?>" id="stx" required class="frm_input" size="40" placeholder="일관된 사용자 경험(특정 구문)">
<!--
버튼 클릭 시 입력값 검증을 수행하는 JavaScript 함수 추가
-->
<button type="submit" class="btn_submit" onclick="return validateInput();">
<i class="fa fa-search" aria-hidden="true"></i> 검색
</button>
</span>
<!-- JavaScript로 입력값 검증 로직 추가 -->
<script>
/**
* 검색 입력값 검증 함수
* - 빈 입력 필드에 대해 경고 메시지를 표시합니다.
*/
function validateInput() {
const searchInput = document.getElementById('stx').value.trim();
if (!searchInput) {
alert('Hey buddy, please enter your search term. -참신한삼치'); // 검색어 입력 경고
return false; // 폼 제출 방지
}
return true; // 정상적으로 폼 제출
}
function fsearch_submit(f) {
const stx = f.stx.value.trim();
if (stx.length < 2) {
alert("검색어는 두글자 이상 입력하십시오."); // 기존 메시지 유지
f.stx.select();
f.stx.focus();
return false;
}
// 검색어 내 공백 검증 로직
let cnt = 0;
for (let i = 0; i < stx.length; i++) {
if (stx.charAt(i) === ' ') cnt++;
}
if (cnt > 1) {
alert("빠른 검색을 위하여 검색어에 공백은 한 개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}
f.stx.value = stx;
return true;
}
</script>
<div class="switch_field">
<input type="radio" value="and" <?php echo ($sop == "and") ? "checked" : ""; ?> id="sop_and" name="sop">
<label for="sop_and">AND</label>
<input type="radio" value="or" <?php echo ($sop == "or") ? "checked" : ""; ?> id="sop_or" name="sop">
<label for="sop_or">OR</label>
</div>
</fieldset>
</form>
♣ 위의 페이지에서 가능. - 약 27번 line - placeholder 내용
<input type="text" name="stx" value="<?php echo $text_stx ?>" id="stx" required class="frm_input" size="40" placeholder="일관된 사용자 경험(특정 구문)">
♣ 위의 페이지에서 가능. - 약 45번 line - 빈 검색어 입력창 메시지
alert('Hey buddy, please enter your search term. -참신한삼치');
