在编辑超链接单击时将标签更改为文本框
我是ruby on rails和twitter bootstrap的新手。 如果我的问题听起来很愚蠢，请接受我的道歉。 我正在使用twitter bootstrap进行我的网站设计。 我一直在尝试使用bootstrap将标签更改为使用超链接按钮单击的文本框。
但我无法这样做，我应该使用jquery这样做，或者我可以使用bootstrap。 请指出正确的方向。 提前致谢
编辑代码使用超链接更新（它也可以是按钮）。 就像，当我点击“编辑”超链接时，我的标签应该显示可以使用bootstrap的占位符属性使用的内容“Saghir”。 我可以提交表单来更新数据库的值。
正如Chris所说， Bootstrap不提供此function，因为它是一个前端框架。 你可以使用jQuery来实现这一目标。 但是，您需要为元素添加一些自定义ID或类，以确保您只选择所需的元素。 您可以执行以下操作：
HTML
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供您参考。
我认为你需要jQuery。 试试这个 ：
$('#edit').click(function() { var text = $('.text-info').text(); var input = $('') $('.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; }
使用隐藏的输入
当用户单击“编辑”时，从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/
我知道这是一个老问题，但只是将更新选项添加到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()); }
这将使用户能够返回正常模式。 此外，可以在更新function上触发更新的Ajax调用。
我用Amyth的回答更多地摆弄了一下。 这个只允许您单击文本进行编辑。 您只需要向任何文本元素添加一个类以启用该function。 输入密钥更新文本。 单击输入外部以中止。
HTML：
Click to edit
JS：
$(document).ready(function() { $('.edit-on-click').click(function() { var $text = $(this), $input = $('') $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：
Click to edit
JS：
function editOnClick(el) { var $text = $(el), $input = $(''); $text.hide() .after($input); $input.val($.trim($text.html())).show() .tooltip({title:"press ENTER to save
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(); }) }