jquery очистити вхідне значення за замовчуванням

77

Як я можу очистити значення за замовчуванням форми введення onfocus onfocus за допомогою jquery і очистити його знову, коли натискається кнопка подання?

<html>
        <form method="" action="">
            <input type="text" name="email" value="Email address" class="input" />
            <input type="submit" value="Sign Up" class="button" />
        </form>
</html>

<script>
$(document).ready(function() {
    //hide input text
    $(".input").click(function(){
        if ($('.input').attr('value') == ''){
            $('.input').attr('value') = 'Email address'; alert('1');}
        if  ($('.input').attr('value') == 'Email address'){
            $('.input').attr('value') = ''}
    });
});
</script>

jquery

— віктор
джерело

9

Чи не могли б ви placeholderзамість цього використовувати рідний атрибут? Існують різні полізаливки, які дозволяють працювати в старих браузерах.

— James Allardice

@JamesAllardice Чому ви не опублікували це як відповідь? Я думаю, що це найпростіше і найкраще рішення.

— желе

1

@jelies - я не публікував це як відповідь, оскільки, хоча він робить те саме, що і те, що намагається зробити OP, він насправді не відповідає, що не так з їх кодом. Але я згоден, це, безумовно, найпростіше рішення!

— James Allardice

Так, це хороша відповідь, і я підтримав її, але я не хочу використовувати тег заповнювача.

— viktor

127

Ви можете використовувати це ..

<body>
    <form method="" action="">
        <input type="text" name="email" class="input" />
        <input type="submit" value="Sign Up" class="button" />
    </form>
</body>

<script>
    $(document).ready(function() {
        $(".input").val("Email Address");
        $(".input").on("focus", function() {
            $(".input").val("");
        });
        $(".button").on("click", function(event) {
            $(".input").val("");
        });
    });
</script>

Говорячи про власний код, проблема полягає в тому, що attr api jquery встановлюється параметром

$('.input').attr('value','Email Adress');

а не так, як ви робили:

$('.input').attr('value') = 'Email address';

— Каустубх
джерело

Я вирішив використати цю відповідь, оскільки вона видається найелегантнішою.

— viktor

1

thnx.i я новачок у jquery. це мій перший прийнятий тут асер, і в цілому третій (як ви, мабуть, можете

— зрозуміти

Чому $('.input').removeAttr('value')не працює?

— Almino Melo

16

$(document).ready(function() {
  //...
//clear on focus
$('.input').focus(function() {
    $('.input').val("");
});
   //clear when submitted
$('.button').click(function() {
    $('.input').val("");
});

});

— Сашко
джерело

Це неправильно $('.input').attr('value') = 'Email address';, повинно бути , $('.input').attr('value', 'Email address');як upvoted ця відповідь?

— Тоні Мішель Кабе

1

@ToniMichelCaubet Відредагував відповідь, дякую. Цей код все одно не був пов’язаний із запитанням. Я скопіював його з коду topicstarter.

— Саша

8

Якщо ви насправді не турбуєтеся про старіші браузери, ви можете просто використати новий placeholderатрибут html5 приблизно так:

<input type="text" name="email" placeholder="Email address" class="input" />

— DJ Forth
джерело

2

"Якщо вас не турбує старіший браузер" ... ви можете заповнити placeholderатрибут, щоб він працював і в старих браузерах. Дивіться мій коментар до запитання та дивіться вікі Modernizr для інших прикладів.

— Джеймс Аллардіка,

Так, це правда, або ви можете просто написати трохи JQuery, щоб самостійно витягнути атрибут, якщо ви зацікавлені.

— DJ Forth

7

$('.input').on('focus', function(){
    $(this).val('');
});

$('[type="submit"]').on('click', function(){
    $('.input').val('');
});

— Фауст
джерело

3

Спробуйте:

  var defaultEmailNews = "Email address";
  $('input[name=email]').focus(function() {
    if($(this).val() == defaultEmailNews) $(this).val("");
  });

  $('input[name=email]').focusout(function() {
    if($(this).val() == "") $(this).val(defaultEmailNews);
  });

— tekilatexee
джерело

2

Просто скорочення

$(document).ready(function() {
    $(".input").val("Email Address");
        $(".input").on("focus click", function(){
            $(this).val("");
        });
    });
</script>

— Тоні Мішель Кабе
джерело