Как очистить текстовое поле по фокусу текстового поля

Question

Я хочу очистить текстовое поле, когда пользователь нажимает на это

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

Answer 1

Если вы не делаете что-то конкретное, когда хотите очистить только клик, я бы предложил (как уже отмечали другие) вместо этого использовать действия onfocus.Таким образом, если кто-то использует tab для навигации, он также очистит текст по умолчанию.

Вы также можете использовать 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'; }">

Answer 2

Для этого вам нужно использовать язык сценариев, возможно, javascript. Вот пример

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

Надеюсь, это поможет.

Edit:

Чтобы встретить то, что Дэвид объясняет здесь, это второй пример на тот случай, если это то, что вы ищете

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

Answer 3

Использование библиотеки jQuery:

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

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

Answer 4

Или вы можете просто использовать атрибут placeholder Например <input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>

Answer 5

Вы можете использовать <input ... onfocus="this.value='';"/>.

Таким образом, поле будет очищено, когда оно получит фокус. Однако, если вы хотите очистить его только тогда, когда пользователь нажимает на него (например, не когда поле получает фокус с клавиатуры), тогда используйте onclick вместо onfocus.

Однако, как указал David Dorward в комментарии, пользователь может не ожидать такого поведения. Поэтому будьте осторожны, чтобы установить эту функцию на действительно определенные поля (например, поле поиска).

Answer 6

Вот как я использую его для преобразователя / калькулятора температуры - когда пользователь печатает (keyup), текстовое поле ввода вычисляется с использованием назначенной функции;когда пользователь выбирает другой текстовый ввод (имеется только два ввода), выбранный текстовый ввод очищается.

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

Answer 7

Добавьте следующий скрипт в ваш файл 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";
   } 
 };

Answer 8

function Clear (x) {if (x.cleared) {} else {x.value = ""; x.cleared = true}}

onfocus = "Clear (this)"

Answer 9

попробуйте это, у меня это сработало

добавьте это в ваш тег ввода

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

, например, если ваш код

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

используйте это так

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