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 ?

javascript jquery html

— 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

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

8

var input = document.getElementById ("IdofInput");
input.placeholder = "No need to fill this field";

Weitere Informationen finden Sie placeholderhier: http://help.dottoro.com/ljgugboo.php

— Padma
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