prototype.jsでテキストエリアに絵文字式入力



前々から気になっていたテキストエリアの任意の場所にテキストを挿入する方法がわかったので、メモ代わりに載せておきます。


※prototype.js依存ですのでご注意ください。


また、prototype.jsに関しては過去のエントリーで確認してください。


動作サンプル



必要なファイル



  • root

    • prototype.js

    • index.html





HTMLソース




<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>prototype.jsでテキストエリアに絵文字式入力</title>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript">

function InEmoji(InTexts,elements){

	var Txtarea = $(elements);

	InTexts = '' + InTexts + '';

	if(navigator.appName.indexOf("Microsoft") > -1){

			Txtarea.focus();

		if (!document.selection) return;

				var range = document.selection.createRange();

				range.text=InTexts;

				Txtarea.focus();

		} else {

			if (Txtarea.createTextRange && Txtarea.caretPos) {

			var caretPos = Txtarea.caretPos;

			caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? InTexts + '' : InTexts;

			Txtarea.focus();

		} else {

			var length = Txtarea.textLength;

			var start = Txtarea.selectionStart;

			var end = Txtarea.selectionEnd;

			var Txtarea1 = Txtarea.value.substring(0, start);

			var Txtarea2 = Txtarea.value.substr(end, length);

			Txtarea.value = Txtarea1 + InTexts + Txtarea2;

			Txtarea.focus();

		}

	}

}

</script>

</head>

<body>

<ul>

    <li><a href="javascript:void(0)" onclick="InEmoji('こんにちは','form')">こんにちはを入力</a></li>

    <li><a href="javascript:void(0)" onclick="InEmoji('ほえ～～','form')">ほえ～～を入力</a></li>



    <li><a href="javascript:void(0)" onclick="InEmoji('濃い茶','form')">濃い茶を入力</a></li>

    <li><a href="javascript:void(0)" onclick="InEmoji('javascript','form')">javascriptを入力</a></li>

    <li><a href="javascript:void(0)" onclick="InEmoji('<h1></h1>','form')">タグも入力できたり？</a></li>

</ul>

<textarea name="source" cols="100" rows="20" id="form">ここにフォーカスかせて入力してみて→←ここだよここ</textarea>

</body>

</html>


javascriptソース




function InEmoji(InTexts,elements){

	var Txtarea = $(elements);

	InTexts = '' + InTexts + '';

	if(navigator.appName.indexOf("Microsoft") > -1){

			Txtarea.focus();

		if (!document.selection) return;

				var range = document.selection.createRange();

				range.text=InTexts;

				Txtarea.focus();

		} else {

			if (Txtarea.createTextRange && Txtarea.caretPos) {

			var caretPos = Txtarea.caretPos;

			caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? InTexts + '' : InTexts;

			Txtarea.focus();

		} else {

			var length = Txtarea.textLength;

			var start = Txtarea.selectionStart;

			var end = Txtarea.selectionEnd;

			var Txtarea1 = Txtarea.value.substring(0, start);

			var Txtarea2 = Txtarea.value.substr(end, length);

			Txtarea.value = Txtarea1 + InTexts + Txtarea2;

			Txtarea.focus();

		}

	}

}


このスクリプトの使い道は色々ありますが、たとえば簡易エディタ、絵文字入力（サーバー側で絵文字に変換させる）、入力補助等考えれば色々使えるんじゃないでしょうか？


使い方はいたって簡単！


prototype.jsを読み込んでいることを前提として


イベントハンドラで onclick="InEmoji('入力させたい文字','入力させるテキストエリアのid')"を記述する。


Categorys:
Program

Trackback(0)

Trackback URL:

Please Comments





Page Top