Question

我有一些关于我必须管理表格和输入的想法的问题......

我打印出一长串项目，当用户点击列表中的某个项目时，我想使用jquery将其与可编辑的输入框交换出来，然后用户可以在其中更改名称列表中的项目。我遇到了几个问题。

在我的HTML中，我有<form>标记，其中包含<li>，但没有输入框。我正在使用此代码将项目与输入框交换...

$('li').click(function(){
    $(this).html('<input type="text"> </input>');
});

这是用文本框交换文本，但无论何时单击要键入的框，它都会重置它并再次将其设置为空框。我不知道如何解决这个问题。有没有办法检查它是否只被点击过一次？

另一个问题是我希望项目的文本在文本框中显示为占位符文本。有没有办法使用查询我可以获取(this)的内容，然后在点击文本框内打印出来？

Answer 1

试试这个：

$('li').click(function(){
    $(this).html('<input type="text" value="'+$(this).html()+'" placeholder="'+$(this).html()+'" />');
});

您需要在此输入上的事件后绑定，以便您可以使用占位符和其他想要的功能。

编辑：当你提交更改时，将每个数据编辑等于0并使用html（）放回

$('li').click(function(){
    if(jQuery(this).attr('data-edit') == '0'){
        jQuery(this).attr('data-edit', '1');
        $(this).html('<input type="text" value="'+$(this).html()+'" placeholder="'+$(this).html()+'" />');
    }
});

Answer 2

使用“状态”。创建元素时，请为它们添加特殊属性，以便您知道是编辑它还是编辑它们。使用clases来更好地控制。

用可编辑的表单替换列表项

2 个答案: