SYNCER

SYNCER

HTMLTextAreaElement.setRangeText() - 任意の範囲にテキストを挿入する

公開日:

HTMLTextAreaElement.setRangeText()は、HTMLTextAreaElementのメソッドです。textarea要素の指定した範囲にテキストを挿入します。キャレットは、テキストを挿入した位置に移動します。

概要

IDL

void setRangeText(DOMString replacement);
void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");

enum SelectionMode {
  "select",
  "start",
  "end",
  "preserve" // default
};

引数

第1引数: replacement

DOMString replacement

挿入するテキスト。

第2引数: start

unsigned long start

範囲の開始位置のオフセット。

第3引数: end

unsigned long end

範囲の終了位置のオフセット。

第4引数: selectionMode (省略可)

optional SelectionMode selectionMode = "preserve"

テキスト挿入後の挙動。下記の中から文字列で指定する。

"select"
挿入したテキストを選択状態にする。
"start"
挿入したテキストの前方にキャレットを移動する。
"end"
挿入したテキストの後方にキャレットを移動する。
"preserve"
初期値。選択状態を維持する。

返り値

void

返り値はありません。

脚注

DOMString

UTF-16の文字列。

enum

列挙型の値であることを表し、指定できる値を定義しています。

optional

引数が省略可能であることを表します。

unsigned long

0〜232-1の整数。

void

undefinedが返ることを表す。

仕様書

https://html.spec.whatwg.org/multipage/forms.html#htmltextareaelement

説明

setRangeText()は、選択範囲を新しいテキストに差し替えるメソッドです。第1引数だけを指定した場合、その時の選択範囲が対象になります。範囲選択がされていない場合は、キャレットの位置に挿入されます。キャレットの位置はデフォルトでは先頭です。

HTML

<textarea id="hoge">12345678901234567890</textarea>

JavaScript

// 要素の取得
var element = document.getElementById( "hoge" ) ;

// メソッドを実行
element.setRangeText( "新しいテキスト" ) ;	// その時の選択範囲が"新しいテキスト"に差し替えられる

第2引数と第3引数で範囲を指定した場合は、その範囲が対象になります。第2引数と第3引数は、指定する時も省略する時もセットでなければいけません。

JavaScript

// メソッドを実行
element.setRangeText( "新しいテキスト", 5, 10 ) ;	// 6〜10文字目が"新しいテキスト"に差し替えられる

第4引数で、テキストを挿入した後の挙動を指定できます。

JavaScript

// メソッドを実行
element.setRangeText( "新しいテキスト", 5, 10 ) ;	// 選択範囲を維持
element.setRangeText( "新しいテキスト", 5, 10, "preserve" ) ;	// 選択範囲を維持
element.setRangeText( "新しいテキスト", 5, 10, "select" ) ;	// 挿入したテキストを選択状態にする
element.setRangeText( "新しいテキスト", 5, 10, "start" ) ;	// 挿入したテキストの前方にキャレットを移動する。
element.setRangeText( "新しいテキスト", 5, 10, "end" ) ;	// 挿入したテキストの後方にキャレットを移動する。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】HTMLTextAreaElement.setRangeText() - 任意の範囲にテキストを挿入する</title>
		<link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/HTMLTextAreaElement/setRangeText/">
		<meta content="width=device-width,initial-scale=1.0" name="viewport">
		<script src="https://demo.syncer.jp/js/demo-web_api_interface.js"></script>
		<script>
window.addEventListener( "load", function () {
	syncer.setup ( {
		method: {
			execute: {
				use: true ,
				callback: [
					{
						function: (typeof myMethod === "function" ? myMethod : null) ,
					}
				] ,
			} ,
		} ,
		error: {
			use: true ,
		} ,
		console: {
			use: true ,
		} ,
	} ) ;
} ) ;
		</script>
		<style>
			body {
				font: 400 15px/1.618 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, メイリオ, meiryo, sans-serif ;
				background-color: #fff ;
			}

			textarea {
				font-size: 16px ;
				width: 80% ;
			}

			form p {
				margin-bottom: 0px ;
			}

			form p + p {
				margin-top: 0px ;
			}
		</style>
	</head>
	<body>

<p>メソッドを実行すると、その3秒後に、setRangeText()を実行し、テキストを挿入します。ボタンをクリックしてから3秒以内に範囲選択をして、挙動を確かめてみて下さい。</p>

<form action="/php/form/1.php">
	<p><textarea id="hoge" name="fuga">123456789012345678901234567890</textarea></p>
	<p><button>内容を送信</button> <button type="reset">リセット</button></p>
</form>

<script>
// setRangeText()
function myMethod () {
	// 要素を取得
	var element = document.getElementById( "hoge" ) ;

	// 3秒後にメソッドを実行
	setTimeout( function () {
		element.setRangeText( "AAAAA" ) ;
//		element.setRangeText( "AAAAA", 5, 10, "preserve" ) ;
	}, 3000 ) ;
}
</script>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>

サポート状況

HTMLTextAreaElement.setRangeText()のサポート状況です。

ブラウザサポート状況ブラウザサポート状況
ChromeSupported 24+FirefoxSupported 27+
EdgeNot SupportedInternet ExplorerNot Supported
SafariSupported 7.1+OperaSupported 15+
iOS SafariSupported 7.0+AndroidSupported 4.4+

Chrome

バージョンサポート状況公開時期シェア
57Supported2017年3月頃0.1%
56Supported2017年1月頃12.02%
55Supported2016年12月頃12.36%
54Supported2016年10月頃0.44%
53Supported2016年9月頃0.25%
52Supported2016年7月頃0.27%
51Supported2016年6月頃0.4%
50Supported2016年4月頃0.32%
49Supported2016年3月頃0.47%
48Supported2016年1月頃0.02%
47Supported2015年12月頃0.06%
46Supported2015年10月頃0.56%
45Supported2015年9月頃0.01%
44Supported2015年7月頃0.83%
43Supported2015年5月頃0.05%
42Supported2015年4月頃0.05%
41Supported2015年3月頃0.01%
40Supported2015年1月頃0.59%
39Supported2014年11月頃0.02%
38Supported2014年10月頃0.08%
37Supported2014年8月頃0.01%
36Supported2014年7月頃0.01%
35Supported2014年5月頃0.01%
34Supported2014年4月頃0.14%
33Supported2014年2月頃0.01%
32Supported2014年1月頃0%
31Supported2013年11月頃0.01%
30Supported2013年10月頃0.03%
29Supported2013年8月頃0%
28Supported2013年6月頃0.03%
27Supported2013年5月頃0.01%
26Supported2013年3月頃0%
25Supported2013年2月頃0%
24Supported2013年1月頃0%
23Not Supported2012年11月頃0%
22Not Supported2012年9月頃0%
21Not Supported2012年7月頃0%
20Not Supported2012年6月頃0%
19Not Supported2012年5月頃0%
18Not Supported2012年3月頃0.01%
17Not Supported2012年2月頃0.01%
16Not Supported2011年12月頃0%
15Not Supported2011年10月頃0%
14Not Supported2011年9月頃0%

Firefox

バージョンサポート状況公開時期シェア
52Supported2017年3月頃0.12%
51Supported2017年1月頃1.7%
50Supported2016年11月頃0.78%
49Supported2016年9月頃0.02%
48Supported2016年8月頃0.07%
47Supported2016年6月頃0.03%
46Supported2016年4月頃0.01%
45Supported2016年3月頃0.1%
44Supported2016年1月頃0.01%
43Supported2015年12月頃0.02%
42Supported2015年11月頃0.01%
41Supported2015年9月頃0%
40Supported2015年8月頃0.02%
39Supported2015年7月頃0.01%
38Supported2015年5月頃0.02%
37Supported2015年3月頃0%
36Supported2015年2月頃0.01%
35Supported2015年1月頃0%
34Supported2014年12月頃0.01%
33Supported2014年10月頃0%
32Supported2014年9月頃0%
31Supported2014年7月頃0.01%
30Supported2014年6月頃0%
29Supported2014年4月頃0%
28Supported2014年3月頃0.01%
27Supported2014年2月頃0%
26Not Supported2013年12月頃0%
25Not Supported2013年10月頃0%
24Not Supported2013年9月頃0%
23Not Supported2013年8月頃0%
22Not Supported2013年6月頃0%
21Not Supported2013年5月頃0%
20Not Supported2013年4月頃0%
19Not Supported2013年2月頃0%
18Not Supported2013年1月頃0%
17Not Supported2012年11月頃0%
16Not Supported2012年10月頃0%
15Not Supported2012年8月頃0%
14Not Supported2012年7月頃0%
13Not Supported2012年6月頃0%
12Not Supported2012年4月頃0%
11Not Supported2012年3月頃0%
10Not Supported2012年1月頃0%
9Not Supported2011年12月頃0%
8Not Supported2011年11月頃0%
7Not Supported2011年9月頃0%
6Not Supported2011年8月頃0%
5Not Supported2011年6月頃0%
4Not Supported2011年3月頃0%

Edge

バージョンサポート状況公開時期シェア
14Not Supported2016年2月頃1.05%
13Not Supported2015年9月頃0.08%

Internet Explorer

バージョンサポート状況公開時期シェア
11Not Supported2013年10月頃4.99%
10Not Supported2012年8月頃0.09%
9Not Supported2011年3月頃0.18%
8Not Supported2009年3月頃0.04%
7Not Supported2006年10月頃0.01%
6Not Supported2001年8月頃0%

Safari

バージョンサポート状況公開時期シェア
10Supported2016年10月頃0%
9.1Supported2015年9月頃0%
8.0Supported2014年10月頃0%
7.1Supported2013年10月頃0%
6.0Not Supported2012年7月頃0%
5.1Not Supported2011年7月頃0%
4Not Supported2009年6月頃0%

Opera

バージョンサポート状況公開時期シェア
43Supported2017年2月頃0.06%
42Supported2016年12月頃0.09%
41Supported2016年10月頃0.01%
40Supported2016年9月頃0%
39Supported2016年8月頃0%
38Supported2016年6月頃0%
37Supported2016年5月頃0.01%
36Supported2016年3月頃0.01%
35Supported2016年2月頃0%
34Supported2015年12月頃0%
33Supported2015年10月頃0%
32Supported2015年9月頃0%
31Supported2015年8月頃0%
30Supported2015年6月頃0%
29Supported2015年4月頃0%
28Supported2015年3月頃0%
27Supported2015年1月頃0%
26Supported2014年12月頃0%
25Supported2014年10月頃0%
24Supported2014年9月頃0%
23Supported2014年7月頃0%
22Supported2014年6月頃0%
21Supported2014年5月頃0.01%
20Supported2014年3月頃0%
19Supported2014年1月頃0%
18Supported2013年11月頃0%
17Supported2013年10月頃0%
16Supported2013年8月頃0%
15Supported2013年7月頃0%
12Not Supported2012年6月頃0.02%
11.6Not Supported2011年12月頃0%
11.1Not Supported2011年4月頃0%

iOS Safari

バージョンサポート状況公開時期シェア
10.0Supported2016年9月頃39.65%
9.1Supported2015年9月頃5.39%
8.3Supported2014年9月頃1.03%
7.0Supported2013年9月頃0.24%
6.0Not Supported2012年9月頃0.05%
5.1Not Supported2011年10月頃0.03%

Android

バージョンサポート状況公開時期シェア
4.4Supported2013年10月頃0%
4.3Not Supported2013年7月頃0%
4.2Not Supported2013年3月頃0.03%
4.1Not Supported2012年12月頃0%
4.0Not Supported2012年6月頃1.61%
2.3Not Supported2011年10月頃0%