Javascript テキストエリアのカーソル位置に文字入力
ブログとかのタグ挿入みたいなやつ
例)
<html>
<head>
<script type="text/javascript">
//ボタン用
function insert(text){
var str = text;
//テキストエリア位置取得
document.getElementById("area").focus();
var selection = document.selection.createRange();
//テキストエリアの位置に取得した内容をセット
selection.text = str+selection.text;
}
//プルダウン用
function puru(form) {
//プルダウンのValueの中身を取得
var index = form.select1.selectedIndex;
var str = form.select1.options[index].value;
//テキストエリアの位置を取得してプルダウンの文字をセット
document.getElementById("area").focus();
var selection = document.selection.createRange();
selection.text = str+selection.text;
}
//プルダウン用
function text_color() {
//プルダウンのValueの中身を取得
var str = document.getElementById('color_select').value;
//テキストエリアの位置を取得してプルダウンの文字をセット
document.getElementById("area").focus();
var selection = document.selection.createRange();
selection.text = str+selection.text;
//選択したプルダウンをリセット
document.getElementById('color_select').selectedIndex = 0;
}
</script>
</head>
<body>
<textarea cols="52" rows="23" id="area" name="textarea" ></textarea>
<br />
<input type="button" value="コードA" onClick="insert('コードA');">
<input type="button" value="コードB" onClick="insert('コードB');">
<br />
<form>
<select name="select1">
<option value="あああ">あああ</option>
<option value="いいい">いいい</option>
<option value="ううう">ううう</option>
</select>
<input type="button" VALUE="文字挿入" ONCLICK="puru(this.form)">
</form>
<form name="test">
color
<select name="color_select"onChange="text_color()">
<option value="">カラー選択</option>
<option value="<font color="#000000"></font>" style="color:#000000;">■Black</option>
<option value="<font color="#808080"></font>" style="color:#808080;">■Gray</option>
<option value="<font color="#C0C0C0"></font>" style="color:#C0C0C0;">■Silver </option>
<option value="<font color="#FFFFFF"></font>" style="color:#FFFFFF;">■White</option>
<option value="<font color="#FF0000"></font>" style="color:#FF0000;"><font>■</font>Red</option>
<option value="<font color="#00FF00"></font>" style="color:#00FF00;">■Lime</option>
<option value="<font color="#00FFFF"></font>" style="color:#00FFFF;">■Aqua</option>
<option value="<font color="#0000FF"></font>" style="color:#0000FF;">■Blue</option>
<option value="<font color="#FF00FF"></font>" style="color:#FF00FF;">■Fuchsia</option>
<option value="<font color="#800000"></font>" style="color:#800000;">■Maroon</option>
<option value="<font color="#808000"></font>" style="color:#808000;">■Olive</option>
<option value="<font color="#008000"></font>" style="color:#008000;">■Green</option>
<option value="<font color="#008080"></font>" style="color:#008080;">■Teal</option>
<option value="<font color="#000080"></font>" style="color:#000080;">■Navy</option>
<option value="<font color="#800080"></font>" style="color:#800080;">■Purple</option>
</select>
</form>
</body>
</html>
【追記】
DOCTYPEによっては、プルダウン用のスクリプトが上記の状態だと動かなかったので、こんな感じにしたら動いた。
function text_color() {
//プルダウンのValueの中身を取得
var str = document.all('color_select').value;
//テキストエリアの位置を取得してプルダウンの文字をセット
document.getElementById("area").focus();
var selection = document.selection.createRange();
selection.text = str+selection.text;
//選択したプルダウンをリセット
document.all('color_select').selectedIndex = 0;
}
また、プルダウンが空白だと無動作とかもできた
function text_color() {
//オプションの配列数を取得
obj = document.test.color_select;
no = obj.selectedIndex;
//0じゃない場合のみ実行
if (no != 0){
//プルダウンのValueの中身を取得
var str = href = obj.options[no].value;
//テキストエリアの位置を取得してプルダウンの文字をセット
document.getElementById("area").focus();
var selection = document.selection.createRange();
selection.text = str+selection.text;
//選択したプルダウンをリセット
document.all('color_select').selectedIndex = 0;
}
}
追記
IE以外のブラウザだったり、DOCTYPEが汎用的なものだったりすると、上記のものだとプルダウンの文字挿入がうまくいかなったので色々調べていると、selectタグに「name」属性と同じ「ID」属性を追加すれば動きました。
<select name="color_select"onChange="text_color()">
↓
<select name="color_select" id="color_select" onChange="text_color()">