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

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供您参考.