Стиль ввода текста html, чтобы соответствовать его содержанию

Question

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

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

---

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

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

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

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

Answer 1

У 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);
}

Answer 2

Идея пролета не так уж и плоха. С библиотекой 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();
}