Стиль ввода текста html в соответствии с его содержимым
Я спросил несколько другие вопросы об этой системе, поэтому постараюсь не повторять много деталей.
Краткая версия состоит в том, что у меня много html-страниц, каждая из которых имеет форму, которая принимает ввод, но никогда не сохраняет ввод нигде - они всегда распечатываются для отправки по почте. Ранее разработчик, который никогда не слышал о @media print, проделал начальную работу над большинством из них, и поэтому он придумал некоторые ... решения странный, чтобы скрыть уродливые текстовые поля на печатной странице, что обычно приводит к созданию двух полностью отдельных копий почти тот же html. К сожалению, во многих случаях это сломало кнопку возврата, и теперь я должен вернуться и исправить их.
В некоторых случаях эти html-формы действительно представляют собой буквы с вводом текста в середине текста. Я могу стилизовать текстовые поля так, чтобы поле не отображалось, но они все еще имеют неправильный размер. Это приводит к появлению дополнительных уродливых пробелов, которым не место. Как сделать так, чтобы вводимые данные соответствовали тексту, введенному пользователем?
Лучшее, что я могу придумать на данный момент, - это иметь скрытый <span> рядом с каждым вводом, который стилизован для отображения вместо ввода при печати, и использовать javascript для его синхронизации. Но это некрасиво. Я ищу что-нибудь получше.
Обновлять:
Большинство наших пользователей все еще используют IE6, но у нас есть IE7 и firefox.
Обновление2:
Я немного переосмыслил это, чтобы использовать ярлык, а не промежуток. Я буду поддерживать отношения, используя атрибут for метки. См. Мой окончательный код в этот вопрос.
Ответы 2
Идея диапазона не так уж и плоха. С библиотекой Javascript, такой как jquery, одна 1-2-строчная функция Javascript может динамически заменять все соответствующие теги <input> на <span>..</span>. Вам не придется самому входить ни в один из пролетов.
В действительно грубом коде псевдо-javascript с jquery это будет примерно так:
function replaceInputsOnSomeButtonClick() {
// Find all inputs, wrap value with span tag, remove the input tag
$("input").text().wrap("<span>").remove();
}
Мне также нужно, чтобы он был обратимым, но это дает мне еще лучшее представление: я могу использовать атрибут имени каждого элемента для переключения. Проблема, однако, в том, что они должны вручную запускать мой код при печати - они не смогут использовать кнопку печати в браузере.
У 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);
}
Я предполагаю, что у вас были проблемы с установкой свойств padding и margin для начала на 0?