テキストボックの中に入力例を表示しておきたい場合があります。
HTML５では、placeholderという属性を使って、簡単にこれを実現することが出来ます。
しかし、それ以前のHTMLにはこの属性はサポートされていないので、JSを使って実現することになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html><html lang="UTF-8"><head> <meta charset="UTF-8"> <title>YMFB_placeholder</title> <style> #wrapper{width: 380px;} textarea{width: 370px;} dt{background: lightblue; padding:4px; margin-top:8px;} dd{margin:2px;} </style> <script type="text/javascript"> // 住所入力 html5 function onButtonClick() { var jyusho = document.getElementById("output"); jyusho.innerHTML = document.getElementById("add1").value + document.getElementById("add2").value; } function onButtonClickJQ() { var jyushoJQ = document.getElementById("outputJQ"); jyushoJQ.innerHTML = document.getElementById("add1JQ").value + document.getElementById("add2JQ").value; } </script> <script type="text/javascript" src="C:\0 JavaScript\jQuery\jquery-3.1.0.min.js" charset="utf-8"></script> <script type="text/javascript" src="C:\0 JavaScript\jQuery\jquery.ah-placeholder.js" charset="utf-8"> $(function() { $('.jq-placeholder').ahPlaceholder({ placeholderColor : 'silver', placeholderAttr : 'title', likeApple : false }); }); </script></head><body> <div id="wrapper"> <h1>住所入力</h1> <dl> <dt>HTML5なら</dt> <dd><input type="text" id="add1" placeholder="都道府県を入力してください。"></dd> <dd><input type="text" id="add2" placeholder="番地を入力してください。"></dd> <dd><input type="button" id="btn_placeholder" value="確定" onclick="onButtonClick();"></dd> <dd><div id="output"></div></dd> </dl> <dl> <dt>jqueryなら</dt> <input type="text" id="add1JQ" value="" placeholder="都道府県を入力してください。"><br> <input type="text" id="add2JQ" value="" placeholder="番地を入力してください。"> <dd><input type="button" id="btn_placeholderJQ" value="確定" onclick="onButtonClickJQ();"></dd> <dd><div id="outputJQ"></div></dd> </form> </dl> </div></body></html> |