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

Posted 2023-05-09

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

【英文标题】：Change Label to Textbox on edit hyperlink click

【发布时间】：2013-05-23 10:49:28

【问题描述】：

我是 ruby​​ on rails 和 twitter bootstrap 的新手。如果我的问题听起来很愚蠢，请接受我的道歉。 我正在使用 twitter 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。 请指出我正确的方向。提前致谢

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

【问题讨论】：

Bootstrap 不提供您正在寻找的任何东西。使用 jQuery。如果您需要更多帮助，您需要更清楚自己想要做什么。例如，将被单击的“超链接按钮”的代码在哪里。然后你希望标签文本被点击时是什么？

我已经更新了我的问题@ChrisPeters 感谢您指出我。我现在正在尝试 jquery。问候。

@ChrisPeters 我认为他想要做的是在用户单击edit 链接时隐藏label 并改为显示text input。 ..

【参考方案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

【讨论】：

如果我想为同一页面上的多个标签执行此操作，我该怎么做？请帮忙。我正在关注您的代码，它运行良好。

@sumedha 你应该为每个标签使用 uniq 的选择器。

【参考方案2】：

正如 Chris 所说，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 供您参考。

【讨论】：

@anonymousxxx：根据问题OP希望在单击锚链接时将标签更改为输入框。上面的例子就是这样做的。

【参考方案3】：

我知道这是一个老问题，但只是在 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 更新调用也可以在更新函数上触发。

【参考方案4】：

使用隐藏输入

<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>

当用户点击“编辑”时，从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/

【讨论】：

@anonymousxxx，谢谢 :-) 当然，Saghir A. Khatri 需要实现一个功能，使用户能够返回“标签模式”，和/或在输入已显示，但这应该很容易。

【参考方案5】：

我对 Amyth 的回答稍加摆弄。这只是让您单击文本进行编辑。您只需向任何文本元素添加一个类即可启用该功能。 Enter 键更新文本。在输入外部单击以中止。

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更新db值）：

这是我最终在实践中使用它的方式： 这使用原始元素上的 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();
            )

【讨论】：

这太棒了。谢谢。你认为你可以扩展我在编辑文本时如何动态设置 吗？现在它只是创建一个输入字段，但我需要从文本的原始输出中获取 ID，以便进行后期更新。我在 php 中循环并输出一系列标签，并且可以在被点击的 span 中包含 ID。有意义吗？