Platzhaltertext ändern

77

Wie kann ich den Platzhaltertext eines Eingabeelements ändern?

Zum Beispiel habe ich 3 Eingaben vom Typ Text.

<input type="text" name="Email" placeholder="Some Text">
<input type="text" name="First Name" placeholder="Some Text">
<input type="text" name="Last Name"placeholder="Some Text">

Wie kann ich den Text von Some Text mit JavaScript oder jQuery ändern ?

jeponkz
quelle
9
Hast du es versucht $('input').attr('placeholder','Some New Text');?
Jeemusu
1
Haben Sie etwas mit Javascript oder JQuery versucht? Bitte posten Sie, was Sie versucht haben und mit welchen Problemen Sie konfrontiert waren.
Ryadavilli
Sie können malarkey
undefined

Antworten:

142

Wenn Sie Javascript verwenden möchten, können getElementsByName()Sie die inputFelder mit der Methode auswählen und placeholderfür jedes Feld ändern ... siehe folgenden Code ...

document.getElementsByName('Email')[0].placeholder='new text for email';
document.getElementsByName('First Name')[0].placeholder='new text for fname';
document.getElementsByName('Last Name')[0].placeholder='new text for lname';

Andernfalls verwenden Sie jQuery:

$('input:text').attr('placeholder','Some New Text');
NazKazi
quelle
29
+1, um nativ zu werden, ohne externe Bibliotheken zu verwenden ... Die Benutzer müssen auf die DOM-APIs achten. Möglicherweise müssen Sie nicht eine ganze Bibliothek verwenden, um so etwas Einfaches zu tun.
Ahmad Alfy
Oft enthält das Feld bereits einen Wert, sodass der Platzhalter nicht sichtbar ist. Sie müssen den Wert löschen. var email = document.getElementsByName("Email")[0]; email.value=''; email.placeholder='new text for email';
Askrynnikov
28

Diese Lösung verwendet jQuery. Wenn Sie für alle Texteingaben denselben Platzhaltertext verwenden möchten, können Sie diesen verwenden

$('input:text').attr('placeholder','Some New Text');

Wenn Sie unterschiedliche Platzhalter möchten, können Sie die ID des Elements verwenden, um den Platzhalter zu ändern

$('#element1_id').attr('placeholder','Some New Text 1');
$('#element2_id').attr('placeholder','Some New Text 2');
arulmr
quelle
5

Mit jquery können Sie dies tun, indem Sie den folgenden Code verwenden:

<input type="text" id="tbxEmail" name="Email" placeholder="Some Text"/>

$('#tbxEmail').attr('placeholder','Some New Text');
rostig
quelle
4

Ich habe das gleiche Problem konfrontiert.

In JS müssen Sie zuerst das Textfeld der Texteingabe löschen. Andernfalls wird der Platzhaltertext nicht angezeigt.

Hier ist meine Lösung.

document.getElementsByName("email")[0].value="";
document.getElementsByName("email")[0].placeholder="your message";
Lulu Pte
quelle
Korrekt. Ohne zuerst das Feld leer zu setzen, wird der Platzhalter nicht angezeigt. Ich habe lange Zeit damit verbracht, bis ich auf diesen Beitrag gestoßen bin.
User12345
0

Versuchen Sie, auf das Platzhalterattribut der Eingabe zuzugreifen, und ändern Sie den Wert wie folgt:

$('#some_input_id').attr('placeholder','New Text Here');

Kann den Platzhalter bei Bedarf auch löschen wie:

$('#some_input_id').attr('placeholder','');
Rajitha Alluri
quelle
0

Für JavaScript verwenden Sie:

document.getElementsByClassName('select-holder')[0].placeholder = "This is my new text";

Für jQuery verwenden Sie:

$('.select-holder')[0].placeholder = "This is my new text";
Murtaza Manasawala
quelle