|
<!DOCTYPE html lang="ja"> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<script> |
|
const PLACEHOLDER_STRING = "${SAMPLE_PLACE_HOLDER}"; |
|
|
|
function printSelectionPosition() { |
|
var target = document.getElementById("textarea"); |
|
|
|
document.getElementById("updatedAt").value = new Date(); |
|
document.getElementById("position").value = "selectionStart = " + target.selectionStart + ", selectionEnd = " + target.selectionEnd; |
|
} |
|
|
|
function insertPlaceholderToSelectionPosition () { |
|
var target = document.getElementById("textarea"); |
|
var selectionStart = target.selectionStart; |
|
var selectionEnd = target.selectionEnd; |
|
|
|
var newText = target.value.substring(0, selectionStart) + PLACEHOLDER_STRING + target.value.substring(selectionEnd); |
|
target.value = newText; |
|
|
|
target.focus(); |
|
target.setSelectionRange(selectionStart, selectionStart + PLACEHOLDER_STRING.length); |
|
} |
|
|
|
window.setInterval(function(){ |
|
printSelectionPosition(); |
|
}, 100); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<form id="form1"> |
|
<label for="position">Target Position</label><br> |
|
<input id="position" type="text" size="100" readonly /><br> |
|
|
|
<label for="updatedAt">Position Updated At</label><br> |
|
<input id="updatedAt" type="text" size="100" readonly /><br> |
|
|
|
<label for="textarea">Target Textarea</label><br> |
|
<textarea id="textarea" rows="15" cols="100"> |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, |
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris |
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor |
|
in reprehenderit in voluptate velit esse cillum dolore eu fugiat |
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, |
|
sunt in culpa qui officia deserunt mollit anim id est laborum. |
|
|
|
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。 |
|
上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。 |
|
ひるすぎみんなは楽屋に円くならんで今度の町の音楽会へ出す第六交響曲こうきょうきょくの練習をしていました。 |
|
トランペットは一生けん命歌っています。 |
|
ヴァイオリンも二いろ風のように鳴っています。 |
|
クラリネットもボーボーとそれに手伝っています。 |
|
ゴーシュも口をりんと結んで眼めを皿さらのようにして楽譜がくふを見つめながらもう一心に弾いています。 |
|
にわかにぱたっと楽長が両手を鳴らしました。みんなぴたりと曲をやめてしんとしました。楽長がどなりました。 |
|
「セロがおくれた。トォテテ テテテイ、ここからやり直し。はいっ。」 |
|
みんなは今の所の少し前の所からやり直しました。ゴーシュは顔をまっ赤にして額に汗あせを出しながら |
|
やっといま云いわれたところを通りました。ほっと安心しながら、つづけて弾いていますと楽長がまた手をぱっと拍うちました。 |
|
「セロっ。糸が合わない。困るなあ。ぼくはきみにドレミファを教えてまでいるひまはないんだがなあ。」 |
|
</textarea><br> |
|
|
|
<label for="otherTextarea">Dummy Textarea</label><br> |
|
<textarea id="otherTextarea" rows="15" cols="100"> |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, |
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris |
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor |
|
in reprehenderit in voluptate velit esse cillum dolore eu fugiat |
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, |
|
sunt in culpa qui officia deserunt mollit anim id est laborum. |
|
|
|
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。 |
|
上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。 |
|
ひるすぎみんなは楽屋に円くならんで今度の町の音楽会へ出す第六交響曲こうきょうきょくの練習をしていました。 |
|
トランペットは一生けん命歌っています。 |
|
ヴァイオリンも二いろ風のように鳴っています。 |
|
クラリネットもボーボーとそれに手伝っています。 |
|
ゴーシュも口をりんと結んで眼めを皿さらのようにして楽譜がくふを見つめながらもう一心に弾いています。 |
|
にわかにぱたっと楽長が両手を鳴らしました。みんなぴたりと曲をやめてしんとしました。楽長がどなりました。 |
|
「セロがおくれた。トォテテ テテテイ、ここからやり直し。はいっ。」 |
|
みんなは今の所の少し前の所からやり直しました。ゴーシュは顔をまっ赤にして額に汗あせを出しながら |
|
やっといま云いわれたところを通りました。ほっと安心しながら、つづけて弾いていますと楽長がまた手をぱっと拍うちました。 |
|
「セロっ。糸が合わない。困るなあ。ぼくはきみにドレミファを教えてまでいるひまはないんだがなあ。」 |
|
</textarea><br> |
|
</form> |
|
|
|
<p>Dummy Text</p> |
|
<p> |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br> |
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> |
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <br> |
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor <br> |
|
in reprehenderit in voluptate velit esse cillum dolore eu fugiat <br> |
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, <br> |
|
sunt in culpa qui officia deserunt mollit anim id est laborum.<br> |
|
<br> |
|
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。<br> |
|
上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。<br> |
|
ひるすぎみんなは楽屋に円くならんで今度の町の音楽会へ出す第六交響曲こうきょうきょくの練習をしていました。<br> |
|
トランペットは一生けん命歌っています。<br> |
|
ヴァイオリンも二いろ風のように鳴っています。<br> |
|
クラリネットもボーボーとそれに手伝っています。<br> |
|
ゴーシュも口をりんと結んで眼めを皿さらのようにして楽譜がくふを見つめながらもう一心に弾いています。<br> |
|
にわかにぱたっと楽長が両手を鳴らしました。みんなぴたりと曲をやめてしんとしました。楽長がどなりました。<br> |
|
「セロがおくれた。トォテテ テテテイ、ここからやり直し。はいっ。」<br> |
|
みんなは今の所の少し前の所からやり直しました。ゴーシュは顔をまっ赤にして額に汗あせを出しながら<br> |
|
やっといま云いわれたところを通りました。ほっと安心しながら、つづけて弾いていますと楽長がまた手をぱっと拍うちました。<br> |
|
「セロっ。糸が合わない。困るなあ。ぼくはきみにドレミファを教えてまでいるひまはないんだがなあ。」 |
|
</p> |
|
|
|
<button id="insertPlaceholderToSelectionPosition" onclick="insertPlaceholderToSelectionPosition();" >Insert Placeholder</button><br> |
|
</body> |
|
</html> |
