textareaObject.colsは、テキストエリア(Textarea要素)のcols属性の値を取得、もしくは、設定するプロパティ。
cols属性には、テキストエリア(Textarea要素)の一行あたりの予想最大文字数を指定できる。cols属性に指定した一行あたりの予想最大文字数は、テキストエリア(Textarea要素)の幅のサイズに影響する。
構文
取得
var $cols = $textareaElementReference.cols;
戻り値
テキストエリア(Textarea要素)のcols属性の値。一行あたりの予想最大文字数。
設定
$textareaElementReference.cols = 予想最大文字数;
- 予想最大文字数
- テキストエリア(Textarea要素)の一行あたりの予想最大文字数を指定。
- 初期設定値は「20」。
サンプル
サンプルテキストエリアのcols属性の値:
サンプルテキストエリア:
サンプルの動作について
- 「5」ボタンをクリックすると、サンプルテキストエリアのcols属性値を「5」にする。「サンプルテキストエリアのcols属性の値:」の右横に「5」と表示する。
- 「10」ボタンをクリックすると、サンプルテキストエリアのcols属性値を「10」にする。「サンプルテキストエリアのcols属性の値:」の右横に「10」と表示する。
- 「20」ボタンをクリックすると、サンプルテキストエリアのcols属性値を「20」にする。「サンプルテキストエリアのcols属性の値:」の右横に「20」と表示する。
- 「30」ボタンをクリックすると、サンプルテキストエリアのcols属性値を「30」にする。「サンプルテキストエリアのcols属性の値:」の右横に「30」と表示する。
- 「40」ボタンをクリックすると、サンプルテキストエリアのcols属性値を「40」にする。「サンプルテキストエリアのcols属性の値:」の右横に「40」と表示する。
- 「50」ボタンをクリックすると、サンプルテキストエリアのcols属性値を「50」にする。「サンプルテキストエリアのcols属性の値:」の右横に「50」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setName( $cols ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.cols = $cols;
var $cols = $elementReference.cols;
document.getElementById( "sampleOutput" ).innerHTML = $cols;
}
</script>
function setName( $cols ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.cols = $cols;
var $cols = $elementReference.cols;
document.getElementById( "sampleOutput" ).innerHTML = $cols;
}
</script>
HTML
<p>
<button onclick="setName(5);">5</button>
<button onclick="setName(10);">10</button>
<button onclick="setName(20);">20</button>
<button onclick="setName(30);">30</button>
<button onclick="setName(40);">40</button>
<button onclick="setName(50);">50</button>
</p>
<p>サンプルテキストエリアのcols属性の値:<span id="sampleOutput"></span></p>
<p>サンプルテキストエリア:<textarea id="sample" cols="20">内容</textarea></p>
<button onclick="setName(5);">5</button>
<button onclick="setName(10);">10</button>
<button onclick="setName(20);">20</button>
<button onclick="setName(30);">30</button>
<button onclick="setName(40);">40</button>
<button onclick="setName(50);">50</button>
</p>
<p>サンプルテキストエリアのcols属性の値:<span id="sampleOutput"></span></p>
<p>サンプルテキストエリア:<textarea id="sample" cols="20">内容</textarea></p>