해당 내용과 일치하는 스타일의 html 텍스트 입력 크기

Question

이 시스템에 대해 other questions에 약간의 질문을 했으므로 자세한 내용을 반복하지 않도록 노력할 것입니다.

짧은 버전은 입력을 허용하는 양식이있는 많은 html 페이지를 가지고 있지만 입력을 저장하지 않으므로 메일 전용으로 인쇄됩니다. @media print에 대해 들어 본 적이없는 이전 개발자가 대부분의 작업을 처음 수행했기 때문에 인쇄 된 페이지의 추한 텍스트 상자를 숨기려면 다음과 같이하십시오. odd 거의 동일한 html의 불행히도 많은 경우에 뒤로 버튼이 부러 졌으므로 지금 돌아가서 고쳐야합니다.

---

경우에 따라 이러한 html 양식은 실제로 텍스트의 중간에 텍스트 입력이있는 양식 문자입니다. 상자에 표시되지 않도록 텍스트 입력의 스타일을 지정할 수는 있지만 여전히 크기가 틀립니다. 이것은 속하지 않는 여분의 추악한 공백을 초래합니다. 어떻게 입력이 사용자가 입력 한 텍스트에 맞게 만들 수 있습니까?

인쇄 할 때 입력 대신 표시되도록 각 입력 옆에 숨겨진 < span>을 숨기고 자바 스크립트를 사용하여 동기화 상태를 유지하는 것이 가장 좋습니다. 그러나 이것은 추한 것입니다. 나는 더 나은 것을 찾고 있습니다.

업데이트 :
우리의 사용자의 대부분은 IE6 여전히 있지만, 우리는 약간의 IE7과 파이어 폭스 거기에있다.

갱신 2 : 나는 기간이 아닌 레이블을 사용하려면이 조금-생각을 다시
. 라벨의 for 속성을 사용하여 관계를 유지 관리 할 것입니다. 최종 코드는 this question을 참조하십시오.

Answer 1

스팬 아이디어가 그렇게 나쁘지 않습니다. jquery과 같은 자바 스크립트 라이브러리를 사용하면 하나의 1-2 행 Javascript 함수를 사용하여 <input> 태그를 모두 <span>..</span>으로 동적으로 바꿀 수 있습니다. 너는 너 자신의 어떤 경간에 들어가야하지 않을 텐데.

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

Answer 2

CSS는 이것에 대한 답변을하지 않습니다 jQuery로

정말 거친 의사 자바 스크립트 코드에서

는 뭔가 같은 것입니다. 입력은 CSS의 블랙 박스 인 "대체 된 요소"입니다.

input {content:attr(value)}은 HTML의 초기 값으로 만 작동하며 이후의 변경 사항은 반영되지 않습니다.

그래서 당신이 얻을 수있는 최선은 못생긴 자바 스크립트입니다.

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