Змінити текст заповнювача


78

Як я можу змінити текст заповнювача вхідного елемента?

Наприклад, у мене є 3 введення тексту типу.

<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">

Як я можу змінити текст Деякі тексти за допомогою JavaScript або jQuery?


9
Ви пробували $('input').attr('placeholder','Some New Text');?
Jeemusu

1
Ви пробували щось із javascript чи jquery? Будь ласка, опублікуйте те, що ви пробували, і які проблеми зіткнулися.
Раві Y

Ви можете використовувати malarkey
undefined

Відповіді:


143

Якщо ви хочете використовувати Javascript, тоді ви можете використовувати getElementsByName()метод для вибору inputполів та зміни placeholderдля кожного з них ... див. Код нижче ...

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';

В іншому випадку використовуйте jQuery:

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

29
+1 для переходу на рідну мову без використання зовнішніх бібліотек ... людям потрібно звертати увагу на API DOM, можливо, вам не потрібно буде використовувати цілу бібліотеку, щоб просто зробити щось подібне.
Ахмад Алфі

Часто поле вже містить значення, тому заповнювач не буде видно. Ви повинні очистити значення. var email = document.getElementsByName("Email")[0]; email.value=''; email.placeholder='new text for email';
askrynnikov

28

Це рішення використовує jQuery. Якщо ви хочете використовувати однаковий текст-заповнювач для всіх введених текстів, ви можете використовувати

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

А якщо вам потрібні різні заповнювачі, ви можете використовувати ідентифікатор елемента, щоб змінити заповнювач

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


5

За допомогою jquery ви можете зробити це, скориставшись таким кодом:

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

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

4

Я стикався з тією ж проблемою.

У JS спочатку потрібно очистити текстове поле введення тексту. Інакше текст заповнювача не відображатиметься.

Ось моє рішення.

document.getElementsByName("email")[0].value="";
document.getElementsByName("email")[0].placeholder="your message";

Це правильно. Без попереднього встановлення поля для порожнього місця заповнювач не відображається. Витратив довго на це, поки я не наткнувся на цю посаду.
Користувач12345

0

Спробуйте отримати доступ до атрибута заповнювача введення та змініть його значення, як показано нижче:

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

Також може очистити заповнювач, якщо потрібно, наприклад:

$('#some_input_id').attr('placeholder','');

0

Для використання JavaScript:

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

Для використання jQuery:

$('.select-holder')[0].placeholder = "This is my new text";
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.