kyokutyo/select-test.html

## select-test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selection test</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#test1').on('click', function() {
        $(this).select();
    });
    $('#test2').on('click', function() {
        $(this).select();
    });
    $('#test3').on('click', function() {
        this.selectionStart = 0;
        this.selectEnd = this.value.length;
    });
    $('#test4').on('click', function() {
        this.selectionStart = 0;
        this.selectEnd = this.value.length;
    });
    $('#test5').on('click', function() {
        this.setSelectionRange(0, this.value.length);
    });
    $('#test6').on('click', function() {
        this.setSelectionRange(0, this.value.length);
    });
    $('#test7').on('focus', function() {
        this.setSelectionRange(0, this.value.length);
    });
    $('#test8').on('focus', function() {
        this.setSelectionRange(0, this.value.length);
    });
});
</script>
</head>
<body>
    <div>
        <h3>input select()</h3>
        <input type="text" id="test1" name="test1" value="あいうえお" />
    </div>
    <div>
        <h3>textarea select()</h3>
        <textarea id="test2" name="test2" cols="30" rows="2">かきくけこ</textarea>
    </div>
    <div>
        <h3>input selectionStart, selectEnd</h3>
        <input type="text" id="test3" name="test3" value="さしすせそ" />
    </div>
    <div>
        <h3>textarea selectionStart, selectEnd</h3>
        <textarea id="test4" name="test4" cols="30" rows="2">たちつてと</textarea>
    </div>
    <div>
        <h3>input setSelectionRange()</h3>
        <input type="text" id="test5" name="test5" value="なにぬねの" />
    </div>
    <div>
        <h3>textarea setSelectionRange()</h3>
        <textarea id="test6" name="test6" cols="30" rows="2">はひふへほ</textarea>
    </div>
    <div>
        <h3>input click ではなく focus で setSelectionRange()</h3>
        <input type="text" id="test7" name="test5" value="まみむめも" />
    </div>
    <div>
        <h3>textarea click ではなく focus で setSelectionRange()</h3>
        <textarea id="test8" name="test8" cols="30" rows="2">やゆよ</textarea>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>selection test</title>
	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
	$(function() {
	$('#test1').on('click', function() {
	$(this).select();
	});
	$('#test2').on('click', function() {
	$(this).select();
	});
	$('#test3').on('click', function() {
	this.selectionStart = 0;
	this.selectEnd = this.value.length;
	});
	$('#test4').on('click', function() {
	this.selectionStart = 0;
	this.selectEnd = this.value.length;
	});
	$('#test5').on('click', function() {
	this.setSelectionRange(0, this.value.length);
	});
	$('#test6').on('click', function() {
	this.setSelectionRange(0, this.value.length);
	});
	$('#test7').on('focus', function() {
	this.setSelectionRange(0, this.value.length);
	});
	$('#test8').on('focus', function() {
	this.setSelectionRange(0, this.value.length);
	});
	});
	</script>
	</head>
	<body>
	<div>
	<h3>input select()</h3>
	<input type="text" id="test1" name="test1" value="あいうえお" />
	</div>
	<div>
	<h3>textarea select()</h3>
	<textarea id="test2" name="test2" cols="30" rows="2">かきくけこ</textarea>
	</div>
	<div>
	<h3>input selectionStart, selectEnd</h3>
	<input type="text" id="test3" name="test3" value="さしすせそ" />
	</div>
	<div>
	<h3>textarea selectionStart, selectEnd</h3>
	<textarea id="test4" name="test4" cols="30" rows="2">たちつてと</textarea>
	</div>
	<div>
	<h3>input setSelectionRange()</h3>
	<input type="text" id="test5" name="test5" value="なにぬねの" />
	</div>
	<div>
	<h3>textarea setSelectionRange()</h3>
	<textarea id="test6" name="test6" cols="30" rows="2">はひふへほ</textarea>
	</div>
	<div>
	<h3>input click ではなく focus で setSelectionRange()</h3>
	<input type="text" id="test7" name="test5" value="まみむめも" />
	</div>
	<div>
	<h3>textarea click ではなく focus で setSelectionRange()</h3>
	<textarea id="test8" name="test8" cols="30" rows="2">やゆよ</textarea>
	</div>
	</body>
	</html>