Как очистить входной текст после нажатия

Ответ 1

Чтобы удалить текст по умолчанию, щелкнув элемент:

$('input:text').click(
    function(){
        $(this).val('');
    });

Я бы предложил вместо focus() использовать focus():

$('input:text').focus(
    function(){
        $(this).val('');
    });

который также реагирует на события клавиатуры (например, клавиша табуляции). Кроме того, вы можете использовать атрибут placeholder в элементе:

<input type="text" placeholder="default text" />

Которая очистится от фокуса элемента и снова появится, если элемент останется пустым/пользователь ничего не вводит.

Ответ 2

Обновление: Я произнес ваше слово "click" буквально, что было немного немым. Вы можете заменить focus на click на все ниже, если вы также хотите, чтобы действие произошло, когда пользователь вставляет вкладку на вход, что кажется вероятным.

Обновление 2: Я предполагаю, что вы хотите сделать заполнители; см. примечание и пример в конце.

Оригинальный ответ:

Вы можете сделать это:

$("selector_for_the_input").click(function() {
    this.value = '';
});

... но это очистит текст независимо от того, что это такое. Если вы хотите очистить его, только если это значение:

$("selector_for_the_input").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

Так, например, если вход имеет id, вы можете сделать:

$("#theId").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

Или если он в форме с id (скажем, "myForm" ), и вы хотите сделать это для каждого поля формы:

$("#myForm input").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

Вы также можете сделать это с делегацией:

$("#myForm").delegate("input", "click", function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

Это использует delegate, чтобы подключить обработчик в форме, но примените его к входам в форме, а не подключить обработчик для каждого отдельного входа.

Если вы пытаетесь сделать заполнители, там больше, чем это, и вы можете захотеть найти хороший плагин для этого. Но вот основы:

HTML:

<form id='theForm'>
  <label>Field 1:
    <input type='text' value='provide a value for field 1'>
  </label>
  <br><label>Field 2:
    <input type='text' value='provide a value for field 2'>
  </label>
  <br><label>Field 3:
    <input type='text' value='provide a value for field 3'>
  </label>
</form>

JavaScript с помощью jQuery:

jQuery(function($) {

  // Save the initial values of the inputs as placeholder text
  $('#theForm input').attr("data-placeholdertext", function() {
    return this.value;
  });

  // Hook up a handler to delete the placeholder text on focus,
  // and put it back on blur
  $('#theForm')
    .delegate('input', 'focus', function() {
      if (this.value === $(this).attr("data-placeholdertext")) {
        this.value = '';
      }
    })
    .delegate('input', 'blur', function() {
      if (this.value.length == 0) {
        this.value = $(this).attr("data-placeholdertext");
      }
    });

});

Живая копия

Конечно, вы также можете использовать новый атрибут placeholder из HTML5 и выполнять только выше, если ваш код работает в браузере который не поддерживает его, и в этом случае вы хотите инвертировать используемую выше логику:

HTML:

<form id='theForm'>
  <label>Field 1:
    <input type='text' placeholder='provide a value for field 1'>
  </label>
  <br><label>Field 2:
    <input type='text' placeholder='provide a value for field 2'>
  </label>
  <br><label>Field 3:
    <input type='text' placeholder='provide a value for field 3'>
  </label>
</form>

JavaScript с jQuery:

jQuery(function($) {

  // Is placeholder supported?
  if ('placeholder' in document.createElement('input')) {
    // Yes, no need for us to do it
    display("This browser supports automatic placeholders");
  }
  else {
    // No, do it manually
    display("Manual placeholders");

    // Set the initial values of the inputs as placeholder text
    $('#theForm input').val(function() {
      if (this.value.length == 0) {
        return $(this).attr('placeholder');
      }
    });

    // Hook up a handler to delete the placeholder text on focus,
    // and put it back on blur
    $('#theForm')
      .delegate('input', 'focus', function() {
        if (this.value === $(this).attr("placeholder")) {
          this.value = '';
        }
      })
      .delegate('input', 'blur', function() {
        if (this.value.length == 0) {
          this.value = $(this).attr("placeholder");
        }
      });
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

Живая копия

(Kudos to diveintohtml5.ep.io для placholder код обнаружения функции.)

Ответ 3

$("input:text").focus(function(){$(this).val("")});

Ответ 4

Вы можете попробовать это

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

Ответ 5

Я предполагаю, что вы пытаетесь создать эффект, где текстовое поле содержит метку. И когда пользователь нажимает в текстовом поле, он исчезает и позволяет пользователю вводить текст. Для этого вам не требуется JQuery.

<input type="text" value="Input Text" onfocus="this.value=''" onblur="(this.value=='')? this.value='Input Text':this.value;" />

Демо

Ответ 6

function submitForm()
{
    if (testSubmit())
    {
        document.forms["myForm"].submit(); //first submit
        document.forms["myForm"].reset(); //and then reset the form values
    }
} </script> <body>
<form method="get" name="myForm">

    First Name: <input type="text" name="input1"/>
    <br/>
    Last Name: <input type="text" name="input2"/>
    <br/>
    <input type="button" value="Submit" onclick="submitForm()"/>
</form>

Ответ 7

Это сработало для меня:

    **//Click The Button**    
    $('#yourButton').click(function(){

         **//What you want to do with your button**
         //YOUR CODE COMES HERE

         **//CLEAR THE INPUT**
         $('#yourInput').val('');

});

Итак, сначала вы выбираете кнопку с помощью jQuery:

$('#button').click(function((){ //Then you get the input element $('#input')
    //Then you clear the value by adding:
    .val(' '); });

Ответ 8

Использование jQuery...

$('#submitButtonsId').click(
    function(){
        $(#myTextInput).val('');
    });

Используя чистый Javascript...

var btn = document.getElementById('submitButton');
btn.onclick = function(){ document.getElementById('myTextInput').value="" };

Ответ 9

Если вам нужно местоподобное поведение. вы можете использовать это.

$("selector").data("DefaultText", SetYourDefaultTextHere);
// You can also define the DefaultText as attribute and access that using attr() function

$("selector").focus(function(){
if($(this).val() == $(this).data("DefaultText"))
   $(this).val('');
});

Ответ 10

Существует элегантный способ сделать это:

<input type="text" value="Search" name="" 
       onfocus="if (this.value == 'Search') {this.value = '';}" 
       onblur="if (this.value == '') {this.value = 'Pesquisa';}"/>

Таким образом, если вы введете что-либо внутри окна поиска, оно не будет удалено, если вы снова щелкните внутри поля.

Ответ 11

попробуйте это

$("input[name=search-mini]").on("search", function() {
 //do something for search
});

Ответ 12

я тоже попробовал это

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

Ответ 13

Я бы рекомендовал использовать это, так как у меня есть тот же вопрос, который исправлен.

$('input:text').focus(
    function(){
        $(this).val('');
    });

Ответ 14

    enter code here<form id="form">
<input type="text"><input type="text"><input type="text">

<input type="button" id="new">
</form>
<form id="form1">
<input type="text"><input type="text"><input type="text">

<input type="button" id="new1">
</form>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#new").click( function(){
        //alert("fegf");
    $("#form input").val('');
    });

      $("#new1").click( function(){
        //alert("fegf");
    $("#form1 input").val('');
    });
});
</script>