Editable Tableでの複数の入力の使用

質問

テキスト領域のあるEditable Tableで新しい行を入力できるようにする（入力を2行以上にする）にはどのようにすればよいですか？

Enterキーを押すと自動的に行が保存されるようにします。

回答

Editable Tableで新しい行の入力はサポートされていません。しかし、JavaScriptコードを使用してこの制限を回避できます。

1. Text Area入力のNameプロパティが設定されていることを確認します（myTextAreaなど）。

2. この入力のすぐ後にExpressionを追加して、Escape Contentプロパティを「No」に設定します。

3. ExpressionのExampleプロパティを「<Script: Allow Enter>」のような意味のあるものに変更します。

4. 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ではキーが押されていないように見えます。

最終的には、以下の例のようになります。