Question

我是ruby on rails和twitter bootstrap的新手。如果我的问题听起来很愚蠢，请接受我的道歉。我正在使用twitter bootstrap进行我的网站设计。我一直在尝试使用bootstrap将标签更改为文本框，使用超链接按钮单击。

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <div class="controls">
        <a href="#">Edit</a>
    </div>

但我无法这样做，我应该使用jquery这样做，或者我可以使用bootstrap。请指出正确的方向。提前致谢

修改代码用超链接更新（它也可以是按钮）。就像当我点击“编辑”超链接时，我的标签应该显示可以使用bootstrap的占位符属性使用的内容“Saghir”。我可以提交表单来更新数据库的值。

Answer 1

我认为你需要jQuery。试试这个：

$('#edit').click(function() {
 var text = $('.text-info').text();
 var input = $('<input id="attribute" type="text" value="' + text + '" />')
 $('.text-info').text('').append(input);
 input.select();

 input.blur(function() {
   var text = $('#attribute').val();
   $('#attribute').parent().text(text);
   $('#attribute').remove();
 });
});

.control-label .text-info { display:inline-block; }

 
<label for="name" class="control-label"><p class="text-info">Saghir</p><i class="icon-star"></i></label>
<div class="controls">
   <a href="#" id="edit" class="btn">Edit</a>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

更新

如果您想要输入更改标签并将标签文本放入输入的占位符，请尝试使用

$('#edit').click(function() {
 var text = $('.text-info').text();
 var input = $('<input type="text" placeholder="' + text + '" />')
 $('.text-info').text('').append(input);
});

.control-label .text-info { display:inline-block; }

<label for="name" class="control-label"><p class="text-info">Saghir</p><i class="icon-star"></i></label>
<div class="controls">
   <a href="#" id="edit" class="btn">Edit</a>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

jsfiddle jsfiddle 2

Answer 2

正如克里斯所说，Bootstrap不提供此功能，因为它是一个前端框架。您可以使用jQuery来实现此目的。但是，您需要在元素中添加一些自定义ID或类，以确保只选择所需的元素。您可以执行以下操作：

<强> HTML

<div class="control-group">
    <label for="name" class="control-label">
        <p class="text-info">Saghir<i class="icon-star"></i></p>
    </label>
    <input type="text" class="edit-input" />
    <div class="controls">
        <a class="edit" href="#">Edit</a>
    </div>
</div>

<强>的jQuery

$(document).ready(function() {
    $('a.edit').click(function () {
        var dad = $(this).parent().parent();
        dad.find('label').hide();
        dad.find('input[type="text"]').show().focus();
    });

    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').show();
    });
});

<强> CSS

.edit-input {
    display:none;
}

这是一个有效的JSFiddle供您参考。

Answer 3

使用隐藏输入

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <input type="text" class="input-medium" style="display:none;">
    <div class="controls">
        <a href="#" onclick="edit(this);">Edit</a>
    </div>
</div>

当用户点击＆＃34;编辑＆＃34;时，从text-info（例如Saghir）抓取文本，隐藏标签，显示输入并设置输入占位符属性。

function edit(element) {
    var parent=$(element).parent().parent();
    var placeholder=$(parent).find('.text-info').text();
    //hide label
    $(parent).find('label').hide();
    //show input, set placeholder
    var input=$(parent).find('input[type="text"]');
    $(input).show();
    $(input).attr('placeholder', placeholder);
}

工作小提琴：http://jsfiddle.net/TKW74/

Answer 4

我知道这是一个老问题，但只是将更新选项添加到Saghirs回答，

http://jsfiddle.net/integerz/k3p4vhnb/

    function edit(element) {
        var parent = $(element).parent().parent();
        var placeholder = $(parent).find('.text-info').text();
        //hide label
        $(parent).find('label').hide();
       //show input, set placeholder
        var input = $(parent).find('input[type="text"]');
        var edit = $(parent).find('.controls-edit');
        var update = $(parent).find('.controls-update');
        $(input).show();
        $(edit).hide();
        $(update).show();
        //$(input).attr('placeholder', placeholder);
    }

    function update(element) {
        var parent = $(element).parent().parent();
        var placeholder = $(parent).find('.text-info').text();
        //hide label
        $(parent).find('label').show();
        //show input, set placeholder
        var input = $(parent).find('input[type="text"]');
        var edit = $(parent).find('.controls-edit');
        var update = $(parent).find('.controls-update');
        $(input).hide();
        $(edit).show();
        $(update).hide();
    //$(input).attr('placeholder', placeholder);
    $(parent).find('label').text($(input).val());
}

这将使用户能够返回正常模式。此外，可以在更新功能上触发Ajax更新调用。

Answer 5

我用Amyth的回答更多地摆弄了一下。这个只允许您单击文本进行编辑。您只需要向任何文本元素添加一个类以启用该功能。输入密钥更新文本。在输入外部单击以中止。

HTML：

<span class="edit-on-click">Click to edit</span>

JS：

$(document).ready(function() {
  $('.edit-on-click').click(function() {
    var $text = $(this),
      $input = $('<input type="text" />')

    $text.hide()
      .after($input);

    $input.val($text.html()).show().focus()
      .keypress(function(e) {
        var key = e.which
        if (key == 13) // enter key
        {
          $input.hide();
          $text.html($input.val())
            .show();
          return false;
        }
      })
      .focusout(function() {
        $input.hide();
        $text.show();
      })
  });
});

JSFiddle

更新（实施AJAX以更新数据库值）：

以下是我在实践中最终使用它的方法：这将使用原始元素上的数据属性为id，model和field在ajax请求中更新。（这是来自使用Bootstrap的Django应用程序，因此根据您的设置，某些行可能已经过时。）

HTML：

<span onclick="editOnClick(this)" 
      data-id="123" 
      data-model="myapp.MyModel" 
      data-field="my_field">Click to edit</span>

JS：

function editOnClick(el) {
    var $text = $(el),
            $input = $('<input type="text" />');

    $text.hide()
            .after($input);

    $input.val($.trim($text.html())).show()
            .tooltip({title:"press ENTER to save<br>click outside to cancel", container:"body", trigger:'focus', html:true})
            .focus()
            .keypress(function(e) {
                var key = e.which;
                if (key == 13) // enter key
                {
                    $.ajax({
                        type: "POST",
                        data: {
                            value:$input.val(),
                            obj_id:$text.attr('data-id'),
                            obj_model:$text.attr('data-model'),
                            obj_field:$text.attr('data-field'),
                            csrfmiddlewaretoken:'{{ csrf_token }}'
                        },
                        url: "{% url 'edit_on_click' %}",
                        cache: false,
                        dataType: "html",
                        success: function(html, textStatus) {
                            $input.hide();
                            $text.html(html)
                                    .show();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('Error: ' + XMLHttpRequest.responseText)
                        }
                    });

                    return false;
                }
            })
            .focusout(function() {
                $input.hide();
                $text.show();
            })
}

在编辑超链接单击时将标签更改为文本框

5 个答案:

更新