1

私はhtmlとjavascriptが初めてです。javascript を使用して入力要素の値を変更しようとしています。目的は、ユーザーがフィールドをクリックしたときにフィールドを空白に設定することです。コードは次のとおりです。

<html>
<head>
<script>
function fn(){
if(document.input1.value=="name")
document.input1.value="";
}</script></head>
<body>
<input name="input1" type="text" value="name" onClick="fn()"/>
</body></html>

ただし、このコードは機能しません。私はクロムブラウザを使用しています。入力タグをフォームタグで囲み、スクリプトでdocument.form.input1.valueコードを使用すると機能します。問題はどこだ？関数から値にアクセスする方法ではなく、ユーザーがクリックしたときにフィールドを空白にする方法については心配していません。前もって感謝します。

4

6 に答える 6

1

これははるかに優れています（プレースホルダーを使用）：

<html>
  <body>
    <input name="input1" type="text" placeholder="name" />​
  </body>
</html>

これは自明です。説明が必要な場合はお知らせください。

于 2012-09-20T12:32:14.837 に答える
1

または、「プレースホルダー」属性を使用することもできます。これには、追加のJavaScriptは必要ありません。私のjsfiddleを参照してください

唯一の違いは、クリックしたときではなく、新しいテキストを入力したときにテキストが消えることです。利点は、フィールドがクリアされると、プレースホルダーテキストが自動的に返されることです。

于 2012-09-20T12:33:27.693 に答える
1

onFocusおよびonBlurイベントを試してみることもできます。

<html>
  <head>
   <script>
     function fn(){
       if(document.getElementById("input1").value=="name")
         document.getElementById("input1").value="";
     }
     function fn2(){
       if(document.getElementById("input1").value=="")
         document.getElementById("input1").value="name";
     }
    </script>
  </head>
  <body>
   <input id="input1" name="input1" type="text" value="name" onFocus="fn();" onBlur="fn2();"/>
  </body>
</html>​

例

編集：

要素をその名前で取得したい場合は、を使用できますがdocument.getElementsByName、これにより、一致するすべての要素のリストが返され、一致する要素の配列として扱われます。上記の場合、次のように切り替えdocument.getElementById("input1")ますdocument.getElementsByName("input1")[0]

于 2012-09-20T12:40:15.193 に答える
0 
<html>
<head>
<script>
function fn(){
if(document.getElementById("input1").value=="name")
document.getElementById("input1").value="";
}</script>
</head>
<body>
<input id="input1" type="text" value="name" onClick="fn()"/>
</body>
</html>
于 2012-09-20T12:38:06.580 に答える
0

Jqueryについて聞いたことがありますか？それはあなたの仕事を単純化するjavascriptライブラリです！

jquery Webサイトからjqueryをダウンロードし、プロジェクトに含めます。

<script type="text/javascript" src="[[jquery file.js]]"></script>

次に、使用できます：

<script>
    $("#[[yourinputid]]").click(
    function()
    {
    if ($(this).val() == "name")
       $(this).val("")
    });
</script>

jquery = easy javascript;）

于 2012-09-20T12:38:34.837 に答える
0

または、作成した JavaScript 関数に入力要素全体を渡し、それを操作することもできますが、要素全体が "onClick="fn(this)" で渡されていることに注意してください。ここでは、これは要素自体を意味します。タグを使用すると、単一のドキュメントで重複した名前が許可され、複数のフォームインスタンスに分離できるため、要素を名前で呼び出すことができると思います。

<html>
<head>
<script >
function fn(obj)
{    
if(obj.value=="name")
obj.value="";
}
</script>
</head>
<body>
<input name="input1" type="text" value="name" onClick="fn(this)"/>
</body></html>
于 2012-09-20T13:04:25.457 に答える