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

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 来做到这一点。 请指出我正确的方向。提前致谢

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

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