use javascript to dislay a form field as text until clicked on

I have got this working with the start point as a span, but I want to have the form still function if javascript is disabled in the browser this is how I had it working originally. I'm still very new to javascript, can someone lend a hand please.

window.onload = function() {

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

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

/开发者_Go百科/ 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 = "";
      };
    }
  };
};

Best way to do this would be to show the input first, then quickly swap it out when the page loads, then swap it back when the user clicks.

You might also consider using the form element the whole time, but just changing CSS classes on it to make it look like normal text. This would make your UI cleaner and easier to maintain in the future.

Then just put the input fields there from the start, and hide them with a script that runs when the form has loaded. That way all the fields will be visible if Javascript is not supported.

I think your best option would be to wrap a form with noscript tags which will fire when Javascript is disabled in a browser. If they display even while in the noscript tags then just set them as not visible with Javascript.

if you have jQuery, something like this should work.

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]);

use the readonly attribute in the input elements:

<input type="text" readonly />

And then remove that attribute with JavaScript in the onclick event handler, reassigning it on 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.