2012-11-22 9 views
44

入力要素のプレースホルダテキストを変更するにはどうすればよいですか?プレースホルダテキストの変更

たとえば、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のを使用していくつかのテキストテキストを変更するにはどうすればよいですか?私は本当に私の問題を解決するためにこれを理解する必要があります。

+8

'$( 'input')を試しましたか?attr( 'プレースホルダ'、 'Some New Text');'? – Jeemusu

+1

javascriptやjqueryで何か試しましたか?あなたが試したこととあなたが直面した問題を投稿してください。 – ryadavilli

+0

マラキー –

答えて

87

を変更する要素のidを使用することができます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'; 
+21

+1外部ライブラリを使用せずにネイティブに行くために...人々はDOM APIに注意を払う必要があります。そうした単純なことをするためにライブラリ全体を使用する必要はありません。 –

+0

多くの場合、フィールドにはすでに値が含まれているため、プレースホルダは表示されません。値をクリアする必要があります。 'var email = document.getElementsByName(" Email ")[0];' 'email.value = ''; ' email.placeholder = '電子メールの新しいテキスト'; ' – askrynnikov

4

使用jqueryのは、次のコードでこれを行うことができます。

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

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

このソリューションは、jQueryを使用しています。あなたはすべてのテキスト入力のために同じプレースホルダテキストを使用したい場合は、

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

を使用することができますし、別のプレースホルダをしたい場合は、プレースホルダは、使用することができます

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

はい使用できます!これは動作します! – visual

4

私がFとなっています同じ問題を抱えている。

JSでは、まずテキスト入力のテキストボックスをクリアする必要があります。そうしないと、プレースホルダテキストは表示されません。

私の解決策です。

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

そうです。最初にフィールドを空白に設定しないと、プレースホルダは表示されません。私はこのポストにぶつかるまでこれに長い時間を費やした。 – User12345

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

あなたはここにplaceholderについての詳細を調べることができます。http://help.dottoro.com/ljgugboo.php

0

入力のplaceholder属性にアクセスしてみて、次のようにその値を変更します。

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

ことも明らか必要な場合はプレースホルダ:

$('#some_input_id').attr('placeholder',''); 
関連する問題