在非編輯模式下如何隱藏輸入文本，然后在Lotus Web窗體中單擊“編輯命令”按鈕時啟用輸入文本

Question

基本上我有一個表格。 所以我有一個表單，可以在Web瀏覽器中顯示我的文檔。 有一些帶有Lotus Notes字段的字段，有些帶有html標簽的字段。

現在，我有一個命令按鈕來編輯表單。 我正在使用@Command([EditDocument])進行編輯。 因此，當我單擊時，它將觸發並使表格可編輯。

不像Web表單的通常Lotus Notes表單。 我可以為網絡中的Lotus Notes字段啟用編輯功能，並禁用編輯功能，但不能為input標簽啟用編輯功能。 我嘗試使用onclick按鈕使用JavaScript隱藏，但我使用的是Lotus Notes按鈕而不是html按鈕。

HTML輸入

<div class="form-group" id="date-container">
    <span class="group-read"><Computed Value></span>
    <input type="text" class="form-control group-edit" id="P-AssignDate" name="PAssignDate" autocomplete="off" value="<Computed Value>">
</div>

JavaScript的

$(document).ready(function() {
    $('#btn-edit').click(function() {
        $('.group-edit').css('display','inline-block');
        $('.group-read').css('display','none');
    });
});

任何人都知道當表單不在編輯模式時如何隱藏輸入按鈕，它只顯示值，而當表單處於編輯模式時，則取消隱藏輸入。

Answer 1

可能您也可以在ready函數中檢查url。 文檔處於編輯模式后，URL應更改為？editDocument。

您還可以創建一個計算字段，如果正在編輯文檔，該字段的值將為一個值，並在ready函數期間查詢該字段...

Answer 2

我只是將輸入字段與div交換（當我想再次進入編輯模式時，反之亦然）。 這是兩個按鈕的代碼，一個用於將所有具有data-attribut dominofield的輸入字段轉換為div，另一個用於將這些div轉換回輸入字段：

// Bind function to Read Only button
$('#btnReadOnly').click( function() {
    // Get all input fields used for Domino
  var inputs = $('[data-dominofield]');
  // Process each field
  inputs.each( function() {
    // Build new DIV element
    var input = $(this);
    var div = '<div class="fieldReadOnly" ';
    div += 'data-dominofield="'+input.data('dominofield')+'" ';
    div += 'id="'+input.attr('id')+'">';
    div += input.val() + '</div>';
    // Insert ther new div element in front of input field
    input.before(div);
    // Remove input field
    input.remove();
  });
 });

 // Bind function to Edit button
$('#btnEdit').click( function() {
    // Get all input fields used for Domino
  var divs = $('[data-dominofield]');
  // Process each field
  divs.each( function() {
    // Build new INPUT element
    var div = $(this);
    var input = '<input type="text" class="form-control" ';
    input += 'data-dominofield="'+div.data('dominofield')+'" ';
    input += 'value="'+div.html()+'" ';
    input += 'id="'+div.attr('id')+'">';
    // Insert ther new input field in front of existing div
    div.before(input);
    // Remove div element
    div.remove();
  });
 });

我創建了一個小提琴來演示這個動作 。