javascript - 是否有默认方法将编辑按钮添加到 Bootstrap 表单中的每个输入文本字段

Question

我正在使用 Bootstrap 创建一个数据更新表单，其中我已经拥有数据，并且用户可以选择编辑任何字段并保存它。由于我不希望用户意外更改字段，因此我最初将输入字段置于禁用状态，并与每个文本输入字段关联一个编辑按钮。

以下是我正在使用的 HTML。

<form role="form">
 <div class="form-group">
  <label for="name">Name</label>
  <div class="input-group">
  <input type="text" class="form-control" id="name" 
     value="Skipper" readonly>
  <div class="input-group-addon">
      <span class="glyphicon glyphicon-pencil" onclick=editName()></span>
  </div>
  </div>   
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

现在要使文本字段的铅笔图标正常工作，我必须编写 JavaScript

function editName() {
    document.getElementById('name').readOnly=false;
};

问题是我的表单中至少有 15-20 个字段，为每个字段编写 javascript 函数看起来不正确。此外，我还希望提供更多功能来增强用户体验，例如在启用输入字段时隐藏铅笔图标。你们能否建议处理此类表单的默认或内置方法。

Answer 1

示例 1:

您还可以创建一个“编辑”按钮，用户可以单击该按钮以使内容可编辑。以下是用于此目的的 HTML:

HTML

<div class='row text-center'>
    <a class="btn btn-danger editBtn">Edit Off</a>
</div>
<form role="form">
    <div class="form-group">
        <label for="name">Name</label>
        <div class="input-group">
            <input type="text" class="form-control editField" value="Skipper" readonly>
            <input type="text" class="form-control editField" value="McAwesome-Sauce" readonly>
            <input type="text" class="form-control editField" value="Tester" readonly>
        </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

jQuery

$(document).ready(function () {
    $('.editBtn').click(function () {
        if ($('.editField').is('[readonly]')) { //checks if it is already on readonly mode
            $('.editField').prop('readonly', false);//turns the readonly off
            $('.editBtn').html('Edit On'); //Changes the text of the button
            $('.editBtn').css("background", "green"); //changes the background of the button
            $('.editBtn').css("border", "green"); //changes the border of the button
        } else { //else we do other things
            $('.editField').prop('readonly', true);
            $('.editBtn').html('Edit Off');
            $('.editBtn').css("background", "red");
        }
    });

});

这将允许您切换所有字段进行编辑。它还使您能够根据需要自定义内容。请看下面我的 fiddle 以了解更多信息。

<强> Demo JSFiddle

示例 2:

这个示例将包含更多的视觉设计。它具有示例 1 的思想，但还包括更改字形。看看以下内容:

jQuery

$(document).ready(function () {
    $('.editBtn').click(function () {
        if ($('.editField').is('[readonly]')) { //checks if it is already on readonly mode
            $('.editField').prop('readonly', false); //turns the readonly off
            $('.editBtn').html('Edit On'); //Changes the text of the button
            $('.editBtn').css("background", "green"); //changes the background of the button
            $('.editBtn').css("border", "green"); //changes the border of the button
            $('.editMode').toggleClass('hide'); //hide one glyphicon
            $('.nonEditMode').addClass('hide'); //show another glyphicon
        } else { //else we do other things
            $('.editField').prop('readonly', true);
            $('.editBtn').html('Edit Off');
            $('.editBtn').css("background", "red");
            $('.editMode').toggleClass('hide');
            $('.nonEditMode').removeClass('hide');
        }
    });

});

HTML - 部分

<label for="name">Name</label>
        <div class="input-group margin-bottom-10">
            <input type="text" class="form-control editField" value="Skipper" readonly />
                <div class="input-group-addon">
                  <span class="glyphicon glyphicon-pencil hide editMode"></span>
                  <span class="glyphicon glyphicon-ok nonEditMode"></span>
                </div>         
        </div>
        <label for="name">Position</label>
        <div class="input-group">
            <input type="text" class="form-control editField" value="Being Awesome" readonly />
                <div class="input-group-addon">
                  <span class="glyphicon glyphicon-pencil hide editMode"></span>
                  <span class="glyphicon glyphicon-ok nonEditMode"></span>
                </div>         
        </div>

<强> Demo JSFiddle

示例 3:

此示例将使用 jQuery 来定位特定区域的输入并切换只读效果。这是执行此操作的 jQuery:

jQuery

$(document).ready(function () {
    $('span').click( function() {
        if($(this).parents().siblings('input').is('[readonly]')){
           $(this).parents().siblings('input').prop('readonly', false); //turns the readonly off
        }else{
           $(this).parents().siblings('input').prop('readonly', true); //turns the readonly off
        }
    });
});

<强> Demo JSFiddle

示例 4:

这可能更符合您的需求。我没有更改您的任何 HTML，我只是将 hide 类添加到您的跨度项目中。您可以在下面的示例 fiddle 中看到它。这是其中包含的 jQuery:

jQuery

$(document).ready(function () {
    $('.glyphicon-ok').toggleClass('hide');
    $('span').click(function () {
        if ($(this).parents().siblings('input').is('[readonly]')) {
            $(this).parents().siblings('input').prop('readonly', false); //turns the readonly off
            $(this).toggleClass('hide'); //hide one glyphicon
            $(this).siblings('.glyphicon-pencil').toggleClass('hide');
        } else {
            $(this).toggleClass('hide'); //hide one glyphicon
            $(this).siblings('.glyphicon-ok').toggleClass('hide');
            $(this).parents().siblings('input').prop('readonly', true); //turns the readonly off
        }
    });

});

首先将一个字形切换为不隐藏，然后每次鼠标单击该范围，只读就会被取消。

<强> Demo JSFiddle