Text aus Textfeld nehmen und in span in Javascript einfügen

Ich mache eine Selbstdruck-Funktion, indem Sie den gesamten HTML-Code aus dem Benutzer-Bildschirm und setzen es in eine Variable, die dann einen Pop-up-Bildschirm zeigt, so dass der Benutzer diese Informationen drucken kann .Text aus Textfeld nehmen und in span in Javascript einfügen

 var disp_setting = "toolbar=no,location=no,directories=no,menubar=no,"; 
     disp_setting += "scrollbars=yes, height=500, left=100, top=25"; 
     var content_vlue = document.getElementById("print_content").innerHTML; 
     var docprint = window.open("", "", disp_setting); 
     docprint.document.open(); 
     docprint.document.write('<html><head>'); 
     docprint.document.write('</head><body text="#000000" onLoad="self.print()">'); 
     docprint.document.write('<table>'); 
     docprint.document.write(content_vlue); 
     docprint.document.write('</table>'); 
     docprint.document.write('</body></html>'); 
     docprint.document.close();

UPDATE: OK dank viele der Vorschläge so weit beginne ich einige Fortschritte zu machen ...

Was würde Ich mag stattdessen print_content der Manipulation zu tun ist, würde ich mag print_content in eine Variable (zB content_vlue) setzen und dann content_vlue manipulieren.

var content_vlue = document.getElementById("print_content").innerHTML; 
$("content_vlue").find("INPUT[type='text']").each(function(i){ 
var input = $(this); 
input.replaceWith("<span class='textinput'>" + input.val() + "</span>"; 
});

Gibt es eine Möglichkeit, dies zu tun?

Quelle

2011-01-06 webdad3

In Ihrem Update ist der '.print_content' Selektor ein Tippfehler? Wenn nicht, sollte "# print_content" äquivalent zu "getElementById" sein. – Chris

@Rfvgyhn - Danke ... das war ein Tippfehler meinerseits ... Ich bin jetzt in der Lage, auf die .html dieses div zuzugreifen ... Ich habe immer noch Probleme beim Ersetzen der Textfelder. – webdad3

Können Sie eine Bibliothek wie jQuery verwenden? Es wäre ziemlich geradlinig die Eingänge mit span-Tags zu ersetzen, sobald Sie die Seite erstellt hatte:

function cleaninputs(){ 
    $("body").find("input").each(function(i) { 
    var input = $(this); 
    input.replaceWith("<span class='textInput'>" + input.val() + "</span>"); 
    }); 
}

EDIT:

Hier ist eine etwas Refactoring-Version, die tun sollten, was Sie wollen:

function replaceInputs(_which){ 
    var cleanHTML = $("#"+_which).clone(); 
    cleanHTML.find("input").each(function() { 
    var input = $(this); 
    input.replaceWith("<span class='textInput'>"+ " " + input.val() + "</span>"); 
    }); 
    return cleanHTML.html(); 
}

Dann diese Zeile ersetzen:

var content_vlue = document.getElementById("print_content").innerHTML;

mit:

var content_vlue = replaceInputs("print_content");

Und Sie sollten alle eingestellt werden. Für eine gute Maßnahme machte ich eine jsfiddle: http://jsfiddle.net/pcsF3/1/

Quelle

2011-01-06 19:28:49 RSG

@RSG - Bitte sehen Sie meine aktualisierte Frage. – webdad3

RFvgyhn ist richtig. Verwenden Sie entweder den Tag-Selektor $ ("div"), um alle Instanzen zu erhalten, oder $ ("# print_content"), um nur eine Instanz nach ID auszuwählen. – RSG

@RSG - was macht das i in Funktion (i)? – webdad3

nur CSS verwenden können Sie einfach die Grenze der Textfelder verstecken sie wie normale Text aussehen zu lassen:

docprint.document.write('<style type="text/css"> input { border: 0; }</style>');

Quelle

2011-01-06 20:07:06

Ja, ich könnte das tun und das würde den Rahmen wegnehmen, aber sagen wir, das Textfeld zeigt nur 13 der 25 Zeichen an, die ich anzeigen möchte, die anderen 12, die gerade ausgeblendet werden. – webdad3

@Jeff gut, 'Eingabe {Grenze: 0; Breite: 300px; } 'sollte den Trick machen ..' 300px' durch die Breite des Containers ersetzen, wenn es fest ist, ist es auch möglich, die Breite zur Laufzeit mit JS-Code einzustellen. :) –

Text aus Textfeld nehmen und in span in Javascript einfügen

Antwort

Verwandte Themen