入力フィールドを読み取り専用にする方法

Owned by Site_admin_1
9月 21, 2023

Q.

入力フィールドを読み取り専用（編集不可）にする方法はありますか？

A. 

JavaScriptを記述することで入力フィールドを読み取り専用にできます。これにより、例えば、SkyVisualEditorの「計算式」の計算結果に指定した入力フィールドを読み取り専用にできます。
主オブジェクトの入力フィールドとデータテーブル内の入力フィールドで設定方法が変わりますので、以下でそれぞれの設定手順を紹介します。

なお、JavaScriptに関してはSkyVisualEditorの標準サポートの対象外です。
また、当ページに記載されているJavaScriptコードが、将来的に動作を保証するものではございません。あらかじめ、ご了承ください。

 

 主オブジェクトの入力フィールドを読み取り専用にする方法
  1. 読み取り専用にしたい入力フィールドのIDを取得
    SkyVisualEditor Studioで読み取り専用にしたい入力フィールドを選択し、Studio右側のコンポーネントプロパティ内のIDを確認します。
    以下では、「Component128」がIDです。


  2. JavaScriptの記述
    SkyVisualEditor Studio右側のページプロパティのタブを選択し、[ページスクリプト編集]ボタンをクリックします。


    ページスクリプトエディタが表示されますので、以下のコードを記述し、[OK]をクリックします。

    jQuery(document).ready(function(){
jQuery('[id$=\\:hoge]').attr('readonly',true);
});


    hogeを、1.で確認したIDへ変更します。


  3. デプロイ
 データテーブル内の入力フィールドを読み取り専用にする方法
  1. 読み取り専用にしたい入力フィールドのIDを取得
    データテーブル内の読み取り専用にしたい入力フィールドのラベルを選択し、Studio右側のコンポーネントプロパティ内のIDを確認します。
    以下では、「Component99」がIDです。


  2. JavaScriptの記述
    読み取り専用にしたい入力フィールドが配置されているデータテーブルを選択し、Studio右側のコンポーネントプロパティ内の[JavaScript]をクリックします。


    テーブルスクリプトエディタが表示されますので、以下のコードを記述します。

    jQuery('[id$=\\:hoge] span input').attr('readonly',true);


    hogeを、1.で確認したIDに変更します。
    以下は、データテーブル内の複数の入力フィールドを読み取り専用項目にした場合のスクリプトです。データスクリプトを記述ができれば、[OK]をクリックします。


  3. デプロイ
 複数行データテーブル内の入力フィールドを読み取り専用にする方法
  1. 読み取り専用にしたい入力フィールドのIDを取得
    データテーブル内の読み取り専用にしたい入力フィールドのラベルを選択し、Studio右側のコンポーネントプロパティ内のIDを確認します。
    以下では、「Component171」がIDです。


  2. JavaScriptの記述
    読み取り専用にしたい入力フィールドが配置されているデータテーブルを選択し、Studio右側のコンポーネントプロパティ内の[JavaScript]をクリックします。


    テーブルスクリプトエディタが表示されますので、以下のコードを記述します。

    jQuery('[id$=\\:hoge]').attr('readonly',true);


    hogeを、1.で確認したIDに変更します。
    以下は、データテーブル内の複数の入力フィールドを読み取り専用項目にした場合のスクリプトです。データスクリプトを記述ができれば、[OK]をクリックします。


  3. デプロイ

本Tipsは、SkyVisualEditorの計算式の利用時など、入力フィールドの配置が必要な場合にご活用ください。

入力フィールドを配置する必要がない場合は、参照フィールドをご活用いただければ、SkyVisualEditorの標準機能で対応できます。