Question

我有下面的代码

<input type="text" />
<button> Submit </button>

现在，当用户输入一些输入并单击提交按钮时，我希望输入文本变得不可编辑，但文本应该仍然存在。此外，提交按钮应该消失。此外，在输入文本框下方，我想使用提交按钮创建另一个与原始文本类似的输入文本。所以，这就像评论系统一样。有关如何使用javascript执行此操作的任何想法。

Answer 1

<input type="text" />
<button> Submit </button>


$('button').click(function() {
    $(this).hide();
    $('input').prop('disabled', true);
})

Example

Answer 2

下面是一个非常简单的方法。但是，对于不显眼的Javascript，您应该以编程方式将onclick事件绑定到按钮。或者更好的是，使用jQuery，它总是抽象事件，这就是我们喜欢它的原因。

 <script>
 function disableInput() {
  document.getElementById("foo").disabled = true;
  document.getElementById("bar").style.display = "none";
 }
 </script>

<input id="foo" type="text" value="Some Text" />
<button id="bar" onclick="disableInput();"> Submit </button>

Answer 3

在jsFiddle

尝试此解决方案

如果您要复制内容，请务必删除ID。它们每页必须是唯一的。这是html：

<p class="comment">
  <input type="text" value="Initial Text" />
  <button>Submit</button>
</p>

使用jQuery，我们使用live绑定到所有未来的按钮。单击该按钮时，克隆该行，禁用该字段，然后删除该按钮。最后在此之后重新插入克隆的段落：

// Execute when document is ready
$(function() {
  // Bind click handler to all current and future button elements
  $('.comment button').live('click', function() {
    // Find the paragraph this button is in and clone it
    var p = $(this).closest('p'), 
        row = p.clone();

    // Disable text field
    $(this).prev().attr('disabled',true);

    // Hide submit button for this row
    $(this).hide();

    // Insert a new field/button pair below this one
    p.after(row);
  }); 
});

使用javascript修改html元素并创建新元素

3 个答案: