Javascript で input や textarea をクリックすると中身を全選択するサンプル

最終更新日:

「下記をコピーして貼り付けてください」でよく見られる、
input や textarea を全選択させる方法。

要素を select() することで全選択できる。

方法1

  • ちょっと長い
<input id="allSelector" type="text" value="smaple code 1" readonly>

<script type="text/javascript">
	var target = document.getElementById('allSelector');
	if (target) {
		target.addEventListener('click', function(e) {
			// e.target.select(); // 自身にクリックイベントを追加した場合はこちらでも可能
			target.select();
		})
	}
</script>

方法2

  • すっきり
<input type="text" onclick="selectAll(this)" value="smaple code 2" readonly>

<script type="text/javascript">
	function selectAll(target) {
		target.select();
	}
</script>

方法3

  • 一番簡単
<input type="text" onclick="this.select()" value="smaple code 3" readonly>