Editable Tableでの複数の入力の使用
質問
テキスト領域のあるEditable Tableで新しい行を入力できるようにする(入力を2行以上にする)にはどのようにすればよいですか?
Enter
キーを押すと自動的に行が保存されるようにします。
回答
Editable Tableで新しい行の入力はサポートされていません。しかし、JavaScriptコードを使用してこの制限を回避できます。
-
Text Area入力のNameプロパティが設定されていることを確認します(
myTextArea
など)。 -
この入力のすぐ後にExpressionを追加して、Escape Contentプロパティを「
No
」に設定します。 -
ExpressionのExampleプロパティを「
<Script: Allow Enter>
」のような意味のあるものに変更します。 -
Expressionの値に以下のJavaScriptコードを入力します。このとき、
myTextArea
は入力の名前に置き換えます。
"<script language='javascript'>
$('#" + myTextArea.Id + "').keyup(function (e) {
if (e.keyCode == 13) {
var ta = this;
var caretPos = ta.selectionStart;
var textAreaTxt = $('#'+this.id).val();
var txtToAdd = '\n';
ta.selectionStart = caretPos + txtToAdd.length;
$('#'+this.id).val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
ta.selectionStart = caretPos + txtToAdd.length;
ta.selectionEnd = caretPos + txtToAdd.length;
e.stopPropagation();
}
})
</script>"
このスクリプトによってユーザーが入力内で押したキーが監視されます。ユーザーがEnter
キーを押したことが検出されると新しい行が挿入され、イベントの伝達を停止します。このため、Editable Tableではキーが押されていないように見えます。
最終的には、以下の例のようになります。