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

Ответ 1

Введение

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

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

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

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• Спецификация HTML5 - раздел "взаимодействие с пользователем"

Использование атрибута 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 охватывает blur (живая копия):

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>

Ответ 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();
});

Ответ 3

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

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

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

На размытие восстанавливаются атрибуты CSS и readonly.