2016-08-25 7 views
1

Я использую текст заполнителя jquery для поискового заполнителя. В этом поле поиска нет никакого заполнителя, поэтому я добавил этот текст.jQuery текст заполнителя для формы ввода

$(document).ready(function(){ 
    $('.mfilter-search').find("input[type=text]").each(function(ev) 
    { 
     if(!$(this).val()) { 
     $(this).attr("placeholder", "Refine Your Search"); 
    } 
    }); 
}); 

Я не знаю, что это лучший способ добавить местозаполнитель, используя jquery. Если кто-нибудь знает более простой способ, пожалуйста, добавьте свой код, это будет очень полезно.

ответ

1

Вы не можете напрямую устанавливать placeholder нет необходимости проверять value и использовать .each()

$('.mfilter-search input[type=text]').attr("placeholder", "Refine Your Search") 

Если вы хотите разместить на первом используйте

$('.mfilter-search input[type=text]:first').attr("placeholder", "Refine Your Search") 
+0

если есть два текстовых поля и я просто хочу, чтобы положить мой заполнитель только один и оба текстового поля и тот же класс, то? –

+0

@shamimkhan, Как вы узнаете, в каком текстовом поле вам нужно указать местозаполнитель, я имею в виду, каковы критерии? – Satpal

+0

есть два поля ввода, и мне нужно добавить местозаполнитель для первого поля ввода –

0

Попробуйте этот код

$(document).ready(function(){ 
    $('.mfilter-search').find("input[type=text]").each(function(ev) 
    { 
      var txt = $(this).data('placeholder'); 
      $(this).attr('placeholder', txt); 
    }); 
}); 
1

Вы можете просто использовать find Метод с использованием value атрибута

$('.mfilter-search').find("input[type=text][!value]").attr("placeholder", "Refine Your Search"); 
+0

, поэтому это значение будет установлено, если нет заполнителя уже установленного права –

+0

Если он уже установлен, он заменит значение placeholder – Mairaj

0

Для держателя мест не требуется сложная функция методы в JQuery просто не использовать, как этот

<input type="text" placeholder = "Zipcode" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Zipcode'" name="zipcode" class="form-control" maxlength='10'> 
0

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

<input type="text" name="fname" placeholder="search"> 

или вы можете добавить класс ко всему элементу, который вам нужно заполнить, например: - .placeholder и добавить атрибут-заполнитель e в javascript.

$(".placeholder").attr("placeholder", "Type here to search"); 

или вы можете использовать плагины, подобные этим. http://andrewrjones.github.io/jquery-placeholder-plugin/ или https://github.com/mathiasbynens/jquery-placeholder или ссылайтесь на этот сайт для разных плагинов-заполнителей. https://www.sitepoint.com/top-5-jquery-html5-placeholder-plugins/

и ваш код также хорош. Мы тоже можем это сделать. желающий это будет работать.

+0

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

+0

, это уменьшит сложность кода. и это не повредит больше, потому что это всего лишь простой фрагмент кода. если вы хотите использовать его, используйте его. или попробуйте jquery-методы. – Abhinav

+0

, если вы не хотите использовать плагины, тогда лучший способ - это класс объявления для элемента и указать атрибут placeholder для этого класса – Abhinav

0

попробуйте это. вот как вы можете добавить place holder, если у вас есть два input fields с такими же class name.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 

 
<style type="text/css"> 
 

 
</style> 
 

 
<body> 
 

 
first name :<input type="text" name="firstname" class="tfield" id="field0"> 
 
last name :<input type="text" name="lastname" class="tfield" id="field1"> 
 

 
</body> 
 
<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 
\t var thelength = $(".tfield").length; 
 
\t for(var i=0;i<thelength;i++) 
 
\t { 
 
\t \t var theid = $("#field"+i); 
 
\t \t var thename = theid.attr("name"); 
 
\t \t alert(thename); 
 
\t \t 
 
\t \t if(thename == "firstname") 
 
\t \t { 
 
\t \t \t theid.attr("placeholder","name"); 
 
\t \t } 
 

 
\t } 
 
}); 
 

 

 
</script> 
 

 
</html>