js/placeholders.min.js 질문입니다.
본문
placeholders.min.js 소스를 아래 소스로 바꿨습니다. 바꿨더니 제목을 입력안하면 동영상과 같이 초기화됩니다.
IE8에서 제목을 입력안하고 글등록을 하면 경고창이 뜬 뒤 여태까지 입력했던 내용이 다 사라집니다.
IE11과 크롬에서는 문제없이 잘 동작합니다.
뭐가 잘못된거죠? 수정하기 어려운건가요?
/* Placeholders.js v4.0.1 */
/*!
* The MIT License
*
* Copyright (c) 2012 James Allardice
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
!function(a){"use strict";function b(){}function c(){try{return document.activeElement}catch(a){}}function d(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return!0;return!1}function e(a,b,c){return a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):void 0}function f(a,b){var c;a.createTextRange?(c=a.createTextRange(),c.move("character",b),c.select()):a.selectionStart&&(a.focus(),a.setSelectionRange(b,b))}function g(a,b){try{return a.type=b,!0}catch(c){return!1}}function h(a,b){if(a&&a.getAttribute(B))b(a);else for(var c,d=a?a.getElementsByTagName("input"):N,e=a?a.getElementsByTagName("textarea"):O,f=d?d.length:0,g=e?e.length:0,h=f+g,i=0;h>i;i++)c=f>i?d[i]:e[i-f],b(c)}function i(a){h(a,k)}function j(a){h(a,l)}function k(a,b){var c=!!b&&a.value!==b,d=a.value===a.getAttribute(B);if((c||d)&&"true"===a.getAttribute(C)){a.removeAttribute(C),a.value=a.value.replace(a.getAttribute(B),""),a.className=a.className.replace(A,"");var e=a.getAttribute(I);parseInt(e,10)>=0&&(a.setAttribute("maxLength",e),a.removeAttribute(I));var f=a.getAttribute(D);return f&&(a.type=f),!0}return!1}function l(a){var b=a.getAttribute(B);if(""===a.value&&b){a.setAttribute(C,"true"),a.value=b,a.className+=" "+z;var c=a.getAttribute(I);c||(a.setAttribute(I,a.maxLength),a.removeAttribute("maxLength"));var d=a.getAttribute(D);return d?a.type="text":"password"===a.type&&g(a,"text")&&a.setAttribute(D,"password"),!0}return!1}function m(a){return function(){P&&a.value===a.getAttribute(B)&&"true"===a.getAttribute(C)?f(a,0):k(a)}}function n(a){return function(){l(a)}}function o(a){return function(){i(a)}}function p(a){return function(b){return v=a.value,"true"===a.getAttribute(C)&&v===a.getAttribute(B)&&d(x,b.keyCode)?(b.preventDefault&&b.preventDefault(),!1):void 0}}function q(a){return function(){k(a,v),""===a.value&&(a.blur(),f(a,0))}}function r(a){return function(){a===c()&&a.value===a.getAttribute(B)&&"true"===a.getAttribute(C)&&f(a,0)}}function s(a){var b=a.form;b&&"string"==typeof b&&(b=document.getElementById(b),b.getAttribute(E)||(e(b,"submit",o(b)),b.setAttribute(E,"true"))),e(a,"focus",m(a)),e(a,"blur",n(a)),P&&(e(a,"keydown",p(a)),e(a,"keyup",q(a)),e(a,"click",r(a))),a.setAttribute(F,"true"),a.setAttribute(B,T),(P||a!==c())&&l(a)}var t=document.createElement("input"),u=void 0!==t.placeholder;if(a.Placeholders={nativeSupport:u,disable:u?b:i,enable:u?b:j},!u){var v,w=["text","search","url","tel","email","password","number","textarea"],x=[27,33,34,35,36,37,38,39,40,8,46],y="#ccc",z="placeholdersjs",A=new RegExp("(?:^|\\s)"+z+"(?!\\S)"),B="data-placeholder-value",C="data-placeholder-active",D="data-placeholder-type",E="data-placeholder-submit",F="data-placeholder-bound",G="data-placeholder-focus",H="data-placeholder-live",I="data-placeholder-maxlength",J=100,K=document.getElementsByTagName("head")[0],L=document.documentElement,M=a.Placeholders,N=document.getElementsByTagName("input"),O=document.getElementsByTagName("textarea"),P="false"===L.getAttribute(G),Q="false"!==L.getAttribute(H),R=document.createElement("style");R.type="text/css";var S=document.createTextNode("."+z+" {color:"+y+";}");R.styleSheet?R.styleSheet.cssText=S.nodeValue:R.appendChild(S),K.insertBefore(R,K.firstChild);for(var T,U,V=0,W=N.length+O.length;W>V;V++)U=V<N.length?N[V]:O[V-N.length],T=U.attributes.placeholder,T&&(T=T.nodeValue,T&&d(w,U.type)&&s(U));var X=setInterval(function(){for(var a=0,b=N.length+O.length;b>a;a++)U=a<N.length?N[a]:O[a-N.length],T=U.attributes.placeholder,T?(T=T.nodeValue,T&&d(w,U.type)&&(U.getAttribute(F)||s(U),(T!==U.getAttribute(B)||"password"===U.type&&!U.getAttribute(D))&&("password"===U.type&&!U.getAttribute(D)&&g(U,"text")&&U.setAttribute(D,"password"),U.value===U.getAttribute(B)&&(U.value=T),U.setAttribute(B,T)))):U.getAttribute(C)&&(k(U),U.removeAttribute(B));Q||clearInterval(X)},J);e(a,"beforeunload",function(){M.disable()})}}(this);
이 소스를
/* placeholder polyfill plugin */
/*! v2.0.7 by @mathias */
(function(f,h,$){var a='placeholder' in h.createElement('input'),d='placeholder' in h.createElement('textarea'),i=$.fn,c=$.valHooks,k,j;if(a&&d){j=i.placeholder=function(){return this};j.input=j.textarea=true}else{j=i.placeholder=function(){var l=this;l.filter((a?'textarea':':input')+'[placeholder]').not('.placeholder').bind({'focus.placeholder':b,'blur.placeholder':e}).data('placeholder-enabled',true).trigger('blur.placeholder');return l};j.input=a;j.textarea=d;k={get:function(m){var l=$(m);return l.data('placeholder-enabled')&&l.hasClass('placeholder')?'':m.value},set:function(m,n){var l=$(m);if(!l.data('placeholder-enabled')){return m.value=n}if(n==''){m.value=n;if(m!=h.activeElement){e.call(m)}}else{if(l.hasClass('placeholder')){b.call(m,true,n)||(m.value=n)}else{m.value=n}}return l}};a||(c.input=k);d||(c.textarea=k);$(function(){$(h).delegate('form','submit.placeholder',function(){var l=$('.placeholder',this).each(b);setTimeout(function(){l.each(e)},10)})});$(f).bind('beforeunload.placeholder',function(){$('.placeholder').each(function(){this.value=''})})}function g(m){var l={},n=/^jQuery\d+$/;$.each(m.attributes,function(p,o){if(o.specified&&!n.test(o.name)){l[o.name]=o.value}});return l}function b(m,n){var l=this,o=$(l);if(l.value==o.attr('placeholder')&&o.hasClass('placeholder')){if(o.data('placeholder-password')){o=o.hide().next().show().attr('id',o.removeAttr('id').data('placeholder-id'));if(m===true){return o[0].value=n}o.focus()}else{l.value='';o.removeClass('placeholder');l==h.activeElement&&l.select()}}}function e(){var q,l=this,p=$(l),m=p,o=this.id;if(l.value==''){if(l.type=='password'){if(!p.data('placeholder-textinput')){try{q=p.clone().attr({type:'text'})}catch(n){q=$('<input>').attr($.extend(g(this),{type:'text'}))}q.removeAttr('name').data({'placeholder-password':true,'placeholder-id':o}).bind('focus.placeholder',b);p.data({'placeholder-textinput':q,'placeholder-id':o}).before(q)}p=p.removeAttr('id').hide().prev().attr('id',o).show()}p.addClass('placeholder');p[0].value=p.attr('placeholder')}else{p.removeClass('placeholder')}}}(this,document,jQuery));
아래는 현재 만들고있는 write.skin.php 소스입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
add_javascript(G5_POSTCODE_JS, 0); //다음 주소 js
// 주소입력
$wr4 = explode('|',$write['wr_4']);
$ex_zip = $wr4[0];
$ex_addr1 = $wr4[1];
$ex_addr2 = $wr4[2];
$ex_addr3 = $wr4[3];
$ex_jibeon = $wr4[4];
?>
<div style="width:745px; float:left; margin-bottom:20px;">
< section id="bo_w">
<h2 class="sound_only"><?php echo $g5['title'] ?></h2>
<!-- 게시물 작성/수정 시작 { -->
<form name="fwrite" id="fwrite" action="<?php echo $action_url ?>" onsubmit="return fwrite_submit(this);" method="post" enctype="multipart/form-data" autocomplete="off" style="width:<?php echo $width; ?>">
<input type="hidden" name="uid" value="<?php echo get_uniqid(); ?>">
<input type="hidden" name="w" value="<?php echo $w ?>">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="wr_id" value="<?php echo $wr_id ?>">
<input type="hidden" name="sca" value="<?php echo $sca ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="sst" value="<?php echo $sst ?>">
<input type="hidden" name="sod" value="<?php echo $sod ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<?php
$option = '';
$option_hidden = '';
if ($is_notice || $is_html || $is_secret || $is_mail) {
$option = '';
if ($is_notice) {
$option .= "\n".'<input type="checkbox" id="notice" name="notice" value="1" '.$notice_checked.'>'."\n".'<label for="notice">공지</label>';
}
if ($is_html) {
if ($is_dhtml_editor) {
$option_hidden .= '<input type="hidden" value="html1" name="html">';
} else {
$option .= "\n".'<input type="checkbox" id="html" name="html" onclick="html_auto_br(this);" value="'.$html_value.'" '.$html_checked.'>'."\n".'<label for="html">HTML</label>';
}
}
if ($is_secret) {
if ($is_admin || $is_secret==1) {
$option .= "\n".'<input type="checkbox" id="secret" name="secret" value="secret" '.$secret_checked.'>'."\n".'<label for="secret">비밀글</label>';
} else {
$option_hidden .= '<input type="hidden" name="secret" value="secret">';
}
}
if ($is_mail) {
$option .= "\n".'<input type="checkbox" id="mail" name="mail" value="mail" '.$recv_email_checked.'>'."\n".'<label for="mail">답변메일받기</label>';
}
}
echo $option_hidden;
?>
<?php if ($is_category) { ?>
<div class="bo_w_select write_div">
<label for="ca_name" class="sound_only">분류<strong>필수</strong></label>
<select name="ca_name" id="ca_name" required>
<option value="">분류를 선택하세요</option>
<?php echo $category_option ?>
</select>
</div>
<?php } ?>
<?php if ($option) { ?>
<div class="write_div">
<span class="sound_only">옵션</span>
<?php echo $option ?>
</div>
<?php } ?>
<div class="bo_w_tit write_div">
<label for="wr_subject" class="sound_only">견적문의 제목<strong>필수</strong></label>
<div id="autosave_wrapper write_div">
<input tabindex="1" type="text" name="wr_subject" value="<?php echo $subject ?>" id="wr_subject" required class="frm_input full_input required" size="50" maxlength="255" placeholder="견적문의 제목">
<?php if ($is_member) { // 임시 저장된 글 기능 ?>
<script src="<?php echo G5_JS_URL; ?>/autosave.js"></script>
<?php if($editor_content_js) echo $editor_content_js; ?>
<button type="button" id="btn_autosave" class="btn_frmline">임시 저장된 글 (<span id="autosave_count"><?php echo $autosave_count; ?></span>)</button>
<div id="autosave_pop">
<strong>임시 저장된 글 목록</strong>
<ul></ul>
<div><button type="button" class="autosave_close">닫기</button></div>
</div>
<?php } ?>
</div>
</div>
<span style="display:block; margin-top:10px;">
< img style="vertical-align:middle;" src="/../images/latesticon.jpg"><font size="3pt"> 기본정보</font></span>
<div class="bo_w_info write_div">
<?php if ($is_name) { ?>
<label for="wr_name" class="sound_only">이름<strong>필수</strong></label>
<input tabindex="2" type="text" name="wr_name" value="<?php echo $name ?>" id="wr_name" required class="frm_input required" placeholder="이름">
<?php } ?>
<input tabindex="3" type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" required class="frm_input required" size="20" placeholder="회사명">
<?php if ($is_password) { ?>
<label for="wr_password" class="sound_only">비밀번호<strong>필수</strong></label>
<input tabindex="4" type="password" name="wr_password" id="wr_password" <?php echo $password_required ?> class="frm_input <?php echo $password_required ?>" placeholder="비밀번호">
<?php } ?>
<?php if ($is_email) { ?>
<label for="wr_email" class="sound_only">이메일</label>
<input tabindex="5" type="text" name="wr_email" value="<?php echo $email ?>" id="wr_email" required class="frm_input email required" placeholder="이메일">
<?php } ?>
</div>
< div style="float:left;">
<div style="display:inline-block; margin-top:5px;"><span>연락받으실 전화번호</span>
<div style="margin-top:5px;">
<?php $hp = explode("-",$write['wr_2']); //연락처?>
<input tabindex="6" type="text" name="hp[0]" value="<?php echo $hp[0] ?>" class="frm_input" size="8" maxlength="4" required> - <input tabindex="7" type="text" name="hp[1]" value="<?php echo $hp[1] ?>" class="frm_input" size="10" maxlength="4" required> - <input tabindex="8" type="text" name="hp[2]" value="<?php echo $hp[2] ?>" class="frm_input required" size="10" maxlength="4" required>
</div>
< /div>
<div style="display:inline-block; margin:5px 0 0 30px;"><span>FAX번호</span>
<div style="margin-top:5px;">
<?php $fax = explode("-",$write['wr_3']); //연락처?>
<input tabindex="9" type="text" name="fax[0]" value="<?php echo $fax[0] ?>" class="frm_input" size="8" maxlength="4"> - <input tabindex="10" type="text" name="fax[1]" value="<?php echo $fax[1] ?>" class="frm_input" size="10" maxlength="4"> - <input tabindex="11" type="text" name="fax[2]" value="<?php echo $fax[2] ?>" class="frm_input" size="10" maxlength="4">
</div>
</div>
< /div>
< div style="clear:both"></div>
< div style="margin-top:9px;">
<label for="ex_zip" class="sound_only">우편번호</label>
<input tabindex="12" type="text" name="ex_zip" value="<?php echo $ex_zip; ?>" id="ex_zip" class="frm_input required" size="7" maxlength="6" placeholder="우편번호" required>
<button tabindex="13" type="button" class="btn_frmline" onclick="win_zip('fwrite', 'ex_zip', 'ex_addr1', 'ex_addr2', 'ex_addr3', 'ex_jibeon');">주소 검색</button><br>
<input tabindex="14" style="margin-top:5px;" type="text" name="ex_addr1" value="<?php echo $ex_addr1; ?>" id="ex_addr1" class="frm_input frm_address" size="93" placeholder="기본주소">
<input tabindex="15" style="margin-top:5px;" type="text" name="ex_addr2" value="<?php echo $ex_addr2; ?>" id="ex_addr2" class="frm_input frm_address" size="93" placeholder="상세주소">
<br>
<input tabindex="-1" style="margin-top:5px;" type="text" name="ex_addr3" value="<?php echo $ex_addr3; ?>" id="ex_addr3" class="frm_input frm_address" size="93" readonly placeholder="참고항목">
<input type="hidden" name="ex_jibeon" value="<?php echo $ex_jibeon; ?>">
< /div>
<div class="write_div">
<label for="wr_content" class="sound_only">내용<strong>필수</strong></label>
<div tabindex="16" class="wr_content <?php echo $is_dhtml_editor ? $config['cf_editor'] : ''; ?>">
<?php if($write_min || $write_max) { ?>
<!-- 최소/최대 글자 수 사용 시 -->
<p id="char_count_desc">이 게시판은 최소 <strong><?php echo $write_min; ?></strong>글자 이상, 최대 <strong><?php echo $write_max; ?></strong>글자 이하까지 글을 쓰실 수 있습니다.</p>
<?php } ?>
<?php echo $editor_html; // 에디터 사용시는 에디터로, 아니면 textarea 로 노출 ?>
<?php if($write_min || $write_max) { ?>
<!-- 최소/최대 글자 수 사용 시 -->
<div id="char_count_wrap"><span id="char_count"></span>글자</div>
<?php } ?>
</div>
</div>
<?php for ($i=1; $is_link && $i<=G5_LINK_COUNT; $i++) { ?>
<div class="bo_w_link write_div">
<label for="wr_link<?php echo $i ?>"><i class="fa fa-link" aria-hidden="true"></i><span class="sound_only"> 링크 #<?php echo $i ?></span></label>
<input type="text" name="wr_link<?php echo $i ?>" value="<?php if($w=="u"){echo $write['wr_link'.$i];} ?>" id="wr_link<?php echo $i ?>" class="frm_input full_input" size="50">
</div>
<?php } ?>
<?php for ($i=0; $is_file && $i<$file_count; $i++) { ?>
<div class="bo_w_flie write_div">
<div class="file_wr write_div">
<label for="bf_file_<?php echo $i+1 ?>" class="lb_icon"><i class="fa fa-download" aria-hidden="true"></i><span class="sound_only"> 파일 #<?php echo $i+1 ?></span></label>
<input type="file" name="bf_file[]" id="bf_file_<?php echo $i+1 ?>" title="파일첨부 <?php echo $i+1 ?> : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="frm_file ">
</div>
<?php if ($is_file_content) { ?>
<input type="text" name="bf_content[]" value="<?php echo ($w == 'u') ? $file[$i]['bf_content'] : ''; ?>" title="파일 설명을 입력해주세요." class="full_input frm_input" size="50" placeholder="파일 설명을 입력해주세요.">
<?php } ?>
<?php if($w == 'u' && $file[$i]['file']) { ?>
<span class="file_del">
<input type="checkbox" id="bf_file_del<?php echo $i ?>" name="bf_file_del[<?php echo $i; ?>]" value="1"> <label for="bf_file_del<?php echo $i ?>"><?php echo $file[$i]['source'].'('.$file[$i]['size'].')'; ?> 파일 삭제</label>
</span>
<?php } ?>
</div>
<?php } ?>
<?php if ($is_use_captcha) { //자동등록방지 ?>
<div class="write_div">
<?php echo $captcha_html ?>
</div>
<?php } ?>
<div class="btn_confirm write_div">
<a href="./board.php?bo_table=<?php echo $bo_table ?>" class="btn_cancel btn">취소</a>
<input type="submit" value="작성완료" id="btn_submit" accesskey="s" class="btn_submit">
</div>
</form>
<script>
<?php if($write_min || $write_max) { ?>
// 글자수 제한
var char_min = parseInt(<?php echo $write_min; ?>); // 최소
var char_max = parseInt(<?php echo $write_max; ?>); // 최대
check_byte("wr_content", "char_count");
$(function() {
$("#wr_content").on("keyup", function() {
check_byte("wr_content", "char_count");
});
});
<?php } ?>
function html_auto_br(obj)
{
if (obj.checked) {
result = confirm("자동 줄바꿈을 하시겠습니까?\n\n자동 줄바꿈은 게시물 내용중 줄바뀐 곳을<br>태그로 변환하는 기능입니다.");
if (result)
obj.value = "html2";
else
obj.value = "html1";
}
else
obj.value = "";
}
function fwrite_submit(f)
{
<?php echo $editor_js; // 에디터 사용시 자바스크립트에서 내용을 폼필드로 넣어주며 내용이 입력되었는지 검사함 ?>
var subject = "";
var content = "";
$.ajax({
url: g5_bbs_url+"/ajax.filter.php",
type: "POST",
data: {
"subject": f.wr_subject.value,
"content": f.wr_content.value
},
dataType: "json",
async: false,
cache: false,
success: function(data, textStatus) {
subject = data.subject;
content = data.content;
}
});
if (subject) {
alert("제목에 금지단어('"+subject+"')가 포함되어있습니다");
f.wr_subject.focus();
return false;
}
if (content) {
alert("내용에 금지단어('"+content+"')가 포함되어있습니다");
if (typeof(ed_wr_content) != "undefined")
ed_wr_content.returnFalse();
else
f.wr_content.focus();
return false;
}
if (document.getElementById("char_count")) {
if (char_min > 0 || char_max > 0) {
var cnt = parseInt(check_byte("wr_content", "char_count"));
if (char_min > 0 && char_min > cnt) {
alert("내용은 "+char_min+"글자 이상 쓰셔야 합니다.");
return false;
}
else if (char_max > 0 && char_max < cnt) {
alert("내용은 "+char_max+"글자 이하로 쓰셔야 합니다.");
return false;
}
}
}
<?php echo $captcha_js; // 캡챠 사용시 자바스크립트에서 입력된 캡챠를 검사함 ?>
document.getElementById("btn_submit").disabled = "disabled";
return true;
}
</script>
<script> $('input').placeholder(); </script>
< /section></div>
< !-- } 게시물 작성/수정 끝 -->
답변 1
아래의 소스를 function fwrite_submit(f) 함수내에 추가해보세요.
if (!f.wr_subject.value {
alert("제목을 입력하세요.");
f.wr_subject.focus();
return false;
}