使用javascript将表单字段显示为文本，直到单击为止

我已经将它作为一个跨度使用，但是如果浏览器中最初禁用了javascript，我希望表单仍然可以运行。我对javascript还是很陌生，有人能帮我一下吗

window.onload = function() {

  document.getElementById('container').onclick = function(event) {
var span, input, text;

// Get the event (handle MS difference)
event = event || window.event;

// Get the root element of the event (handle MS difference)
span = event.target || event.srcElement;

// If it's a span...
if (span && span.tagName.toUpperCase() === "SPAN") {
  // Hide it
  span.style.display = "none";

  // Get its text
  text = span.innerHTML;

  // Create an input
  input = document.createElement("input");
  input.type = "text";
  input.size = Math.max(text.length / 4 * 3, 4);
  span.parentNode.insertBefore(input, span);

  // Focus it, hook blur to undo
  input.focus();
  input.onblur = function() {
    // Remove the input
    span.parentNode.removeChild(input);

    // Update the span
    span.innerHTML = input.value;

    // Show the span again
    span.style.display = "";
      };
    }
  };
};

---

在

输入

元素中使用

只读

属性：

<input type="text" readonly />

---

.

然后从一开始就将输入字段放在那里，并使用加载表单时运行的脚本隐藏它们。这样，如果不支持Javascript，所有字段都将可见。

最好的方法是先显示输入，然后在页面加载时快速将其调出，然后在用户单击时将其调回

---

你也可以考虑在整个时间使用表单元素，但是只需改变它的CSS类，使它看起来像普通文本。这将使您的UI更干净，将来更易于维护。

我认为您最好的选择是使用

noscript

标记包装表单，当浏览器中禁用Javascript时，这些标记将触发。如果它们在

noscript

标记中显示，则只需使用Javascript将它们设置为不可见即可。

如果您有jQuery，类似的操作应该会起作用

function makeElementIntoClickableText(elm){
  $(elm).parent().append("<div onClick='switchToInput(this);'>"+ elm.value +"</div>");
  $(elm).hide();
}

function switchToInput(elm){
    $(elm).prev().prev().show();
    $(elm).hide();
}

makeElementIntoClickableText($("input")[0]);

函数makeElementInClickableText（elm）{
$（elm.parent（）.append（“+elm.value+”）；
$（elm.hide（）；
}
功能切换到输入（elm）{
$（elm.prev（）.prev（）.show（）；
$（elm.hide（）；
}
将元素设置为可点击文本（$（“输入”）[0]）；

这就是我想做的，但我不知道怎么做，上面的代码块是由其他人编写的，我一直在尝试反向工作，但没有任何运气，我遗漏了一些东西，如果使用javascript，这将使表单变得无用disabled@Philbert：哎呀。我已经更正了JavaScript，因此JavaScript应用、删除并重新应用了

只读

，而不是在HTML中设置。你是对的，虽然，最初这个答案会是不友好的…哎呀=/我在这方面运气不太好。请给我一张白痴支票好吗，现在很晚了。我只看到输入字段，它们没有变化。

function makeElementIntoClickableText(elm){
  $(elm).parent().append("<div onClick='switchToInput(this);'>"+ elm.value +"</div>");
  $(elm).hide();
}

function switchToInput(elm){
    $(elm).prev().prev().show();
    $(elm).hide();
}

makeElementIntoClickableText($("input")[0]);