コントロールの値は、
<textarea>SAMPLE</textarea>
のようにHTMLの構文上は子要素となっていますが、Inputなどと同様にvalueプロパティで取得、設定できます。
| メソッド | 説明 |
|---|---|
| blur | |
| checkValidity | |
| focus | |
| select | |
| setCustomValidity |
onfocusイベント時に参照しているthisオブジェクトに対してselect()を実行することで、テキストエリア内の文字を選択状態にできます。
これをonclickイベントで処理するとクリックのたびに全体が選択されてしまうため、文字の一部を選択するのが困難になってしまいます。よってonfocusで処理するようにします。
<textarea onfocus="this.select()"></textarea>
| onfocusで処理 | |
|---|---|
| onclickで処理 |
Google ChromeやSafariでは、前述の方法では選択された直後にすぐにそれが解除されてしまいます。よってそれらの環境にも対応させるには、次のようにsetTimeout()メソッドを使用して遅延実行します。
<textarea
onfocus="var self=this; window.setTimeout( function() { self.select(); }, 0 );">
</textarea>
処理部を関数としてまとめると、これは次のようにも記述できます。
<textarea onfocus="SelectText( this )"></textarea>
<script type="text/javascript">
function SelectText( element )
{
window.setTimeout( function() { element.select(); }, 0 );
}
</script>
入力はイベントで、文字数はTextarea.value.lengthで取得できます。
日本語入力モードのとき、ブラウザによってはkeydownとkeyupイベントが発生しないため、文字数をカウントできません。
| イベントハンドラ | イベント捕捉時の文字数 |
|---|---|
| onkeydown | |
| onkeyup | |
| oninput | |
| onchange | |
| onpaste |