используйте JavaScript, чтобы отобразить поле формы как текст, пока не нажмете - PullRequest
0 голосов
/ 28 июля 2011

У меня это работает с начальной точкой в ​​виде промежутка, но я хочу, чтобы форма все еще работала, если в браузере отключен 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 = "";
      };
    }
  };
};

Ответы [ 5 ]

1 голос
/ 28 июля 2011

Лучший способ сделать это - сначала показать ввод, затем быстро поменять его при загрузке страницы, а затем поменять его обратно, когда пользователь щелкнет.

Можно также рассмотреть возможность использования элемента формывсе время, но просто меняя классы CSS, чтобы он выглядел как обычный текст.Это сделает ваш интерфейс более чистым и простым в обслуживании в будущем.

0 голосов
/ 28 июля 2011

если у вас есть 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]);
0 голосов
/ 28 июля 2011

Я думаю, что ваш лучший вариант - обернуть форму тегами noscript, которые будут срабатывать при отключении JavaScript в браузере. Если они отображаются даже в тегах noscript, просто установите их как невидимые в Javascript.

0 голосов
/ 28 июля 2011

Затем просто поместите туда поля ввода с самого начала и скройте их с помощью скрипта, который запускается при загрузке формы. Таким образом, все поля будут видны, если Javascript не поддерживается.

0 голосов
/ 28 июля 2011

используйте атрибут readonly в элементах input:

<input type="text" readonly />

А затем удалите этот атрибут с помощью JavaScript в обработчике события onclick, переназначив его на 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 .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...