web-dev-qa-db-ja.com

テキストフィールドのフォーカスでテキストフィールドをクリアする方法

ユーザーがクリックしたときにテキストフィールドをクリアしたい

<input name="name" type="text" id="input1" size="30" maxlength="1000" value="Enter Postcode or Area" onfocus=="this.value=''" />

javascripthtmluser-controls
11
Gaurav Srivastava

これを行うには、おそらくJavaScriptであるスクリプト言語を使用する必要があります。ここに例

<input type='text' value'Some text' onclick='javascript: this.value = ""' />

お役に立てれば。

編集：

ここでデビッドが説明していることを満たすために、それがあなたが探しているものである場合の2番目の例です

<script type='javascript'>
    var clear = true;
    function clear(obj)
    {
        if(clear)
        {
            obj.value = '';
            clear = false;
        }
    }
</script>

<input type='text' value'Some text' onfocus='clear(this);' />
9
Ash Burlaczenko

Onclickをクリアしたいだけの特定のことをしていない限り、（他の人が指摘したように）代わりにonfocusアクションを使用することをお勧めします。この方法では、誰かがタブを使用してナビゲートしている場合、デフォルトのテキストもクリアされます。

Onblurを使用して、それが空かどうかを確認して戻すこともできます。

 <input type="text" value="Default text" name="yourName" onfocus="if(this.value == 'Default text') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Default text'; }">
19
ORyan

JQueryライブラリの使用：

<input id="clearme" value="Click me quick!" />

$('#clearme').focus(function() { 
  $(this).val(''); 
});
5
Jhourlad Estrella

または、単にプレースホルダー属性を使用することもできます。たとえば、<input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>

3
Vishal Kumar

<input ... onfocus="this.value='';"/>を使用できます。

このように、フィールドはフォーカスを取得するとクリアされます。ただし、ユーザーがクリックしたときのみ（つまり、フィールドがキーボードでフォーカスを取得したときなどに）クリアしたい場合は、onclickではなくonfocusを使用します。

ただし、コメントのDavid Dorwardで示されているように、この動作はユーザーが予期しないものになる場合があります。したがって、この機能を本当に特定のフィールド（検索フィールドなど）に設定するように注意してください。

2
Romain Linsolas

これは私が温度コンバーター/計算機にそれを使用する方法です-ユーザーが入力すると（キーアップ）、テキスト入力ボックスは割り当てられた関数を使用して計算します。ユーザーが他のテキスト入力を選択すると（入力は2つしかありません）、選択したテキスト入力はクリアされます。

HTML：

<p class="celcius"><h2 style="color:#FFF">Input:</h2>
    <input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" onfocus="this.value='';" id="celsius" />
</p>

  <hr>

  <h2 style="color:#FFF">Result:</h2>

<p class="Fahrenheit">
    <input name="Fahrenheit" type="text" class="feedback-input" id="Fahrenheit" onkeyup="Conversion2()" onfocus="this.value='';"placeholder="Temperature (Fahrenheit)" />
  </p>

JavaScript：

function Conversion() {
    var tempCels = parseFloat(document.getElementById('celsius').value);
      tempFarh =(tempCels)*(1.8)+(32);
      document.getElementById('Fahrenheit').value= tempFarh;
 }

function Conversion2() {
    var tempFarh = parseFloat(document.getElementById('Fahrenheit').value);
      tempCels =(tempFarh - 32)/(1.8);
      document.getElementById('celsius').value= tempCels;
 }
1
rockmandew
function Clear (x) {if (x.cleared) {} else {x.value = ""; x.cleared = true}}

onfocus = "Clear (this)"
0
Philip Taylor

次のスクリプトをjsファイルに追加します。

var input1 = document.getElementById("input1")

input1.onfocus = function() {
  if(input1.value == "Enter Postcode or Area") {
      input1.value = "";
  } 
};

input1.onblur = function() {
    if(input1.value == "") {
       input1.value = "Enter Postcode or Area";
   } 
 };
0
Matyas

これを試して、私のために働いた

これを入力タグに追加します

<code>
onfocus="this.value='';"</code>

たとえば、コードが

<code>
<input type="text" value="Name" /></code>

このように使います

<code><input onfocus="this.value='';" type="text" value="Name" /></code>
0
user3152781