Как я могу переключить текстовое поле для <label>, <div>или <span>, используя jQuery?

Question

Я пытаюсь «создать один источник» страницы формы, которая может находиться в режиме редактирования или в режиме просмотра. По разным причинам в нем не используются элементы управления ASP.Net FormView или DetailsView.

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

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

Поэтому у меня возникла идея использовать jQuery для замены элементов управления вводом для элементов <label>, <div> или <span>. В некоторой степени это работает путем создания соответствующих селекторов и использования метода replace() jQuery для динамического обмена элементами.

Проблема в том, что мне нужно не только копировать содержимое, но также стили, атрибуты и размеры исходных элементов управления вводом (на данный момент мы говорим только о текстовых полях - у нас есть другое решение для выпадающих списков и списки).

Должна работать грубая сила - «создать резервную копию» всех атрибутов элемента управления вводом, создать новый элемент «только для чтения», а затем заменить элемент управления вводом новым элементом. То, что я ищу, является чем-то более простым.

Вкратце, используя jQuery, как лучше всего заменить текстовое поле на метку, чтобы метка имела такое же содержимое и отображалась в том же месте и стиле, что и текстовое поле?

Вот что у меня есть:

$(":text").each( function() {
    var oldClass = $(this).attr("class");
    var oldId = $(this).attr("id");
    var oldHeight = $(this).outerHeight();
    var oldWidth = $(this).outerWidth();
    var oldStyle = $(this).attr("style");
    $(this).replaceWith("<div id='" + oldId + "'>" + $(this).val() + "</div>");
    $("div#" + oldId).attr("class", oldClass);
    $("div#" + oldId).attr("style", oldStyle);
    $("div#" + oldId).width(oldWidth);
    $("div#" + oldId).height(oldHeight);
    $("div#" + oldId).css("display", "inline-block");
});

Answer 1

Это может не соответствовать вашим потребностям, но это возможно.

Теги

и поддерживают свойство только для чтения. Поведение полей только для чтения немного отличается от отключенного. Вот что говорит HTML 4.01 Рекомендация :

Если установлено, атрибут readonly имеет следующие эффекты для элемента:

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

Другое ключевое отличие состоит в том, что элементы с этим атрибутом могут быть стилизованы так, как вам нравится (Например, вы можете удалить или изменить границы и фон.) Поэтому вместо того, чтобы создавать новые элементы и копировать атрибуты, вы можете просто добавить или удалить атрибут только для чтения.

Затем вы можете создать стиль для этих полей "input [readonly] {}". Конечно, отмечая, что популярные версии IE игнорируют селектор атрибутов в CSS. (Так что, возможно, просто определите класс, который вы добавляете и удаляете.)

Answer 2

Почему бы не использовать плагин редактирования на месте, например Jeditable . Таким образом, вы можете создать режим просмотра и редактировать каждое поле одним нажатием кнопки.

Answer 3

Когда я это сделал, мне приходилось «съедать» каждое нажатие клавиши, как вы описываете, и отражать его в «скрытом» теге span, который отражает элемент <input или <select. Все теги span имеют класс css, стилизованный с использованием селекторов мультимедиа для отображения только для печати, а входы имеют класс css, стилизованный для отображения только на экране.

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