Wie kann ich den Text einer Dateiupload-Schaltfläche erhalten?

Question

Ich schreibe Dokumentation für eine Webplattform und möchte in meinen Anweisungen auf eine Schaltfläche zum Hochladen von Dateien verweisen. Der genaue Text auf der Schaltfläche hängt jedoch vom Browser ab. Zum Beispiel ruft Firefox es Browse... und Chrome nennt es Choose File.

<input type="file"> 

Ist es möglich, den Zugriff auf diesen Text programmatisch (nicht ändern)? Ich weiß, dass ich den Browser erkennen und den Text in der Dokumentation entsprechend einstellen kann, oder sogar eine Problemumgehung benutze, um den Schaltflächentext zu setzen, aber das ist nicht das, wonach ich frage.

Answer 1

Dieser Text wird festgelegt, indem der Browser dieses spezifische HTML-Element rendert. Es gibt keine Möglichkeit, auf diesen Text zuzugreifen oder ihn zu ändern. Es wird niemals in das DOM geladen, daher ist auch das Finden über jQuery keine Option.

Für Ihre Dokumentation, möchten Sie vielleicht, was die IE-Version des Textes sein wird, dann Liste Chrome, Safari, Firefox, etc. Es ist die beste Weise, die ich vorstellen kann, um den Benutzer zu erklären.

EDIT

dachte, ich würde aktualisieren und Schatten DOM erwähnen, weil es für mich interessant und neu ist. Sie können dies in Chrome Dev Tools -> Einstellungen -> Benutzer-Agent-Schatten-DOM aktivieren aktivieren. Dort können Sie das gerenderte Steuerelement und den darauf gesetzten Text sehen. Es ist zwar programmgesteuert nicht durch clientseitiges Scripting zugänglich. :(

Answer 2

Sie können ein Label für die input_id verwenden und die Eingabe verbergen

Beispiel:..

label { 
 
/*Just to simulate a button, you will put your button style*/ 
 
    -webkit-appearance: button; 
 
    -moz-appearance: button; 
 
    appearance: button; 
 
    text-decoration: none; 
 
    color: initial; 
 
} 
 

 
input { 
 
/*hide the inout*/ 
 
    width: 0px; 
 
    outline:none; 
 
    opacity:0; 
 
    visibility:none; 
 
    height:0px; 
 
    display:none; 
 
}

<label for="b1"> 
 
    Name 
 
    <input type="file" id="b1"> 
 
</label>

Arbeits DEMO

Answer 3

Ist es möglich, auf diesen Text programmatisch zugreifen (nicht ändern)?

Nein, es ist nicht möglich, die .value des <input> Element innerhalb <input type="file"> ShadowDOM zuzugreifen, die programmatisch den Text macht. Die .shadowRoot Eigenschaft von <input type="file"> DOM Element, in dem ShadowDOM angezeigt wird, wird auf null festgelegt.

Chrome, macht Chrom die .value von <input type="button" value="Choose File" pseudo="-webkit-file-upload-button"> bei ShadowDOM von <input type="file"> Element bei .computedName Eigenschaft input type="file" Element

const UPLOAD_BUTTON_TEXT = document.querySelector("input[type=file]") 
 
.computedName; 
 
console.log(UPLOAD_BUTTON_TEXT);

<input type="file" />

---

Bei Chrom, Chrom Sie das Element anzeigen können

<input type="button" value="Choose File" pseudo="-webkit-file-upload-button"> 

die den Text in host<input type="file"> Element rendert durch DevTools Öffnen Auswählen Settings, Show user agent shadow DOM Überprüfung, dann das Inspizieren <input type="file"> Element.

<input type="file">