テキストボックへの入力例表示

テキストボックの中に入力例を表示しておきたい場合があります。
HTML５では、placeholderという属性を使って、簡単にこれを実現することが出来ます。
しかし、それ以前のHTMLにはこの属性はサポートされていないので、JSを使って実現することになります。

<!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>

テキストボックへの入力例表示

カテゴリー