Question

我使用起点作为跨度，但是如果最初在浏览器this is how I had it working中禁用了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 = "";
      };
    }
  };
};

Answer 1

最好的方法是首先显示输入，然后在页面加载时快速将其换出，然后在用户点击时将其交换回来。

您可能还会考虑一直使用表单元素，但只需更改其上的CSS类，使其看起来像普通文本。这将使您的UI更清洁，将来更容易维护。

Answer 2

使用readonly元素中的input属性：

<input type="text" readonly />

然后在onclick事件处理程序中使用JavaScript删除该属性，并在blur上重新分配：

var inputs = document.getElementsByTagName('input');

for (i=0; i < inputs.length; i++) {
    inputs[i].setAttribute('readonly',true);
    inputs[i].onclick = function(){
        this.removeAttribute('readonly');
    };
    inputs[i].onblur = function(){
        this.setAttribute('readonly',true);
    };
}

JS Fiddle demo

Answer 3

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

Answer 4

我认为您最好的选择是使用noscript标记包装一个表单，该表单会在浏览器中禁用Javascript时触发。如果它们显示在noscript标记中，则只需将其设置为使用Javascript不可见。

Answer 5

如果你有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]);

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

5 个答案: