Стиль ввода текста в формате HTML для соответствия его содержимому

Question

Я просил несколько other questions здесь об этой системе, поэтому я постараюсь избежать повторения большого количества деталей.

Короткий вариант заключается в том, что у меня есть много html-страниц, каждая из которых имеет форму, которая принимает входные данные, но никогда не сохраняет вход в любом месте - они только распечатываются для рассылки. Ранее разработчик, который никогда не слышал о @media print, сделал начальную работу над большинством из них, и поэтому он придумал некоторые ... нечетные решения, чтобы скрыть уродливые текстовые поля на печатной странице, как правило, приводя к двум совершенно отдельным копиям почти одного и того же html. К сожалению, во многих случаях это сломало кнопку «назад», и теперь я должен вернуться и исправить их.

---

В некоторых случаях эти html-формы действительно представляют собой буквы формы с текстовыми вводами в середине текста. Я могу стилизовать текстовые входы, чтобы ящик не показывался, но они все еще неправильного размера. Это приводит к кучке лишних уродливых пробелов, где это не принадлежит. Как сделать входные данные подходящими для текста, введенного пользователем?

Лучшее, что я могу придумать на данный момент, это иметь скрытый < span> рядом с каждым входом, который предназначен для отображения вместо ввода при печати, и использовать javascript, чтобы синхронизировать его. Но это уродливо. Я ищу что-то лучшее.

Update:
Большинство наших пользователей все еще находятся в IE6, но у нас есть некоторые IE7 и Firefox там.

Update2:
Я снова подумал, что это немного, чтобы использовать ярлык, а не пролетом. Я сохраню отношения, используя атрибут метки for. См. this question для моего окончательного кода.

Answer 1

Идея пролета не так уж плоха. С помощью библиотеки Javascript, такой как jquery, одна функция Javascript на 1-2 строки может динамически заменять все соответствующие теги <input><span>..</span>. Вам не пришлось бы входить ни в один из пролетов.

В самом деле грубый псевдо-код Javascript с JQuery это будет что-то вроде:

function replaceInputsOnSomeButtonClick() { 
// Find all inputs, wrap value with span tag, remove the input tag 
$("input").text().wrap("<span>").remove(); 
} 

Answer 2

CSS не имеет ответа на этот. Входы - это «замененные элементы» - черный ящик в CSS.

input {content:attr(value)} работает только для начального значения в HTML и не будет отражать никаких последующих изменений.

Таким образом, лучшее, что вы можете получить, - это менее уродливый Javascript.

for(var i=0; i < form.elements.length; i++) 
{ 
    var input = form.elements[i]; 
    if (input.type != 'text') continue; 

    var span = document.createElement('span'); 
    input.parentNode.insertBefore(span,input); 

    span.className = 'show-in-print'; 
    input.className = 'hide-in-print'; 

    input.onchange = (function(span){ // trick to preserve current value of span 
     return function() 
     { 
     if (span.firstChild) span.removeChild(span.firstChild); 
     span.appendChild(document.createTextNode(this.value)); 
     } 
    })(span); 
}