ah-placeholder.jsã¯placeholderå¤ã¨åãæåãå ¥åã§ããªã
ah-placeholder.jsãä½ã£ã¦ããã人ã¯ãã£ã¨ãã°ããããã§ããããã©â¦
ã¡ããã¨ä»æ§æ±ºãã¦ãªããããplaceholderå¤ã¨åãæåãå
¥åã§ããªããã£ã¦ããã®ãå¼ã£ãããã¨ããããããã§ã
ãããã£ã¨IE8ããã®åªç¸ãã解ãæ¾ãããã¨æã£ããIE8対å¿ãã¾ã ã¾ã ããç¾å®ã
ãããªä¸ã§ãï¼ç§ãããªã誰ããï¼ä½ã£ãJSãIE8ã§ãã¾ãåãã¦ãªãï¼ç´ãã¦ï¼ãã¨æ¥ãã®ã§è¦ã¦ã¿ãã¨ah-placeholder.jsããããã«ã¡ã¯ã
ã¨ããããç¨ä»¶çã«ã¯
ã»placeholderå¤ã¨åãæåãå
¥åã§ããªããããªãã¨ããã¦
ã»ä½ãå
¥åãã¦ããªãã¨placeholderå¤ããã©ã¼ã ã«éããã¦ãã¦ãã¾ããããªãã¨ããã¦
ã¨ã®ãã¨ã§ããã
æ£ç´placeholderãªãã¦éè¦ãããªãã ããIE9以ä¸ã¯placeholderãªãã«ããããâ¦ã¨ãã¤ãæãã
ããã¼ãã¼ãªã¼ã¨æã£ã¦ãããä½ã£ã人ãç¾ãã¦
ããã£ã¡ã®JSã«å¤ãã¦ãã ããï¼ã©ããããæ¾ã£ã¦ããï¼ã
ã¨ããã®ã§ã©ããã¼ã¨æãå®è£
ã
大ä½OKã§ãããtextareaé¢ä¿ã§è¦éãããªããã°ããã£ãã®ã§å¾®ä¿®æ£ã
placeholderã¯IE9ã対å¿ã§ãã¦ããªããããIE9ãæ»ã¬ã¾ã§ã¾ã ã¾ã ããããã使ãããã§ãã
ä¸å¿ã½ã¼ã¹ä¹ãã¦ããã¾ããã»ã¼äººã®ã½ã¼ã¹ã ãã©ã
å
ã½ã¼ã¹æ¤ç´¢ãããã§ãããããããªãã£ãããã¶ãæã£ã¦ãã人ãããã«æ¹ä¿®ããã®ã ããã
転å¤å
ãããã£ããæãã¦ãã ããã楽ããã¦ããã£ãããã²ç´¹ä»ãããã®ã§ï¼¾ï¼¾ï¼
使ãæ¹ã¯jqueryãå®è£
ãã¦placeHolderå±æ§ã使ãã ãã§ãã
JSã
<!--[if lte IE 9]> <script src=""></script> <![endif]-->
ã§å²ãã°å®ç§ã§ãã
JS $(function() { function placeHolder() { $('[placeholder]').each(function() { var inputW = $(this); if(!inputW.closest('.inputWrap').is('*')){ inputW.wrap('<span class="inputWrap"></span>'); } var wrap = inputW.closest(".inputWrap"); var label = $('<label />').appendTo(wrap); label.attr({'for': inputW.attr("id"), 'class': 'placeholder01'}).html(inputW.attr('placeholder')) if(wrap.find('textarea').is('*')){ wrap.addClass('inputWrapTextarea'); } inputW.focus(function () { label.hide(); }).blur(function () { if (this.value == '') { label.show(); } else { label.hide(); } }); $(document).on('click', '.inputWrap > label', function() { $(this).siblings('input,textarea').focus(); }); if ($(this).val()) { label.hide(); } }); } placeHolder(); });
CSS .inputWrap { position: relative; } label.placeholder01 { position: absolute; top: 2px; left: 5px; color: #999; font-size: 16px; white-space: nowrap; cursor: text; } .inputWrapTextarea .placeholder01{ display:inline-block; width:92%; top:auto; margin-top:7px; white-space:normal; }