используя JavaScript для изменения текста в поле ввода при нажатии на

Question

Я пытаюсь создать страницу, которая имеет несколько редактируемых полей, но я хочу, чтобы они отображались в качестве полей ввода только после того, как пользователь нажимает на них (остальное время отображается в виде обычного текста).Есть ли простой способ сделать это в Javascript?

Answer 1

Введение

Довольно просто, да.Я могу вспомнить два основных подхода:

• Использование атрибута contenteditable
• Использование input, которое вы добавляете на лету

Удобные ссылки для обоих ниже:

• Ядро DOM2
• HTML DOM2
• Ядро DOM3
• HTML5 spec - раздел «взаимодействие с пользователем»

Использование атрибута contenteditable

Атрибут contentEditable ( W3C , MDC , MSDN ) может иметь значение "истина", что означает, что элемент можно редактировать напрямую.Это имеет то преимущество, что вообще не требует никакого JavaScript ( живой пример ):

<p id="container">The <span contenteditable="true">colored items</span> in this paragraph
are <span contenteditable="true">editable</span>.</p>

Чтобы вы не думали, что это что-то новое, IE поддерживал его начиная с IE 5.5 и другихосновные браузеры очень долго.(На самом деле, это было одно из многих нововведений Microsoft со времен IE5.5 / IE6; они также дали нам innerHTML и Ajax.)

Если вы хотите получить (отредактированный) контент, вы простовозьмите innerHTML из элементов, которые вы сделали редактируемыми.Вот пример некоторого JavaScript, который будет отображаться при contenteditable span blur ( live copy ):

var spans = document.getElementsByTagName("span"),
    index,
    span;

for (index = 0; index < spans.length; ++index) {
    span = spans[index];
    if (span.contentEditable) {
        span.onblur = function() {
            var text = this.innerHTML;
            text = text.replace(/&/g, "&amp").replace(/</g, "&lt;");
            console.log("Content committed, span " +
                    (this.id || "anonymous") +
                    ": '" +
                    text + "'");
        };
    }
}

#container span {
    background-color: #ff6;
}

<p id="container">The <span id="span1" contenteditable="true">colored items</span> in this paragraph 
    are <span contenteditable="true">editable</span>.</p>

Используя input, вы добавляете на лету

Вам необходимо получить ссылку на элемент, который вывы используете для отображения (возможно, span), а затем подключите его событие click (или подключите событие click к родительскому элементу нужного элемента (ов)).В событии click скройте span и вставьте рядом с ним input[type=text].

Вот очень простой пример использования input:

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.value = 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 == "" ? " " : input.value;

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

#container span {
    background-color: #ff6;
}

<p id="container">The <span>colored items</span> in this paragraph
    are <span>editable</span>.</p>

Там я перехватываю click на родительском элементе p, а не на отдельных пролетах, потому что я хотел иметь больше, чемодин, и это легче сделать.(Это называется «делегирование события».) Вы можете найти различные функции, использованные выше, в ссылках, которые я дал в начале ответа.

В этом случае я использовал blur, чтобы снова отредактировать,но вы можете захотеть иметь кнопку ОК и / или другие триггеры (например, клавишу Enter).

---

Не по теме : Вы могли заметить в коде JavaScript выше, чтоМне пришлось обработать пару «различий MS» (например, вещи, которые IE делает не так, как другие браузеры), и я использовал старый стиль обработчика событий «DOM0», когда вы просто назначаете функцию свойству, которое нене идеально, но это избавляет меня от необходимости обрабатывать еще еще одну разницу, когда некоторые версии IE не имеют DOM2 addEventListener, и поэтому вам придется вернуться к attachEvent.

Моя точка зрения такова: вы можете сгладить различия между браузерами и получить множество полезных функций, используя приличную библиотеку JavaScript, такую ​​как jQuery , Prototype , YUI , Закрытие или любой из нескольких других .Вы не сказали, что используете какие-либо библиотеки, поэтому я не упомянул выше, но есть веские причины использовать их, чтобы вам не приходилось беспокоиться о мелочах в браузере, а просто приступить к решению ваших проблем.фактическая потребность бизнеса.

Answer 2

Тривиальный пример использования простого JavaScript будет выглядеть следующим образом: http://jsfiddle.net/vzxW4/.

document.getElementById('test').onclick = function() {
    document.body.removeChild(this);
    var input = document.createElement('input');
    input.id = 'test';
    input.value = this.innerHTML;
    document.body.appendChild(input);
    input.select();
}

Однако использование библиотеки сэкономит ваше время и головные боли.Например, используя jQuery: http://jsfiddle.net/vzxW4/1/.

$("#test").click(function() {
    var input = $("<input>", { val: $(this).text(),
                               type: "text" });
    $(this).replaceWith(input);
    input.select();
});

Answer 3

Можем ли мы сделать это просто, ребята?

Просто оставьте текстовое поле со свойством readonly true и некоторые CSS, которые делают текстовое поле похожим на span с границей.

Затем, как только пользователь нажимает на текстубрать атрибут readonly.

При размытии восстановить атрибуты CSS и readonly.