jquery 输入表单的占位符文本

Question

我正在使用 jquery 占位符文本作为搜索占位符。此搜索字段没有任何占位符，因此我添加了此文本。

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

我不知道这是使用 jquery 添加占位符的最佳方式。如果有人知道更简单的方法，请添加您的代码，这将非常有帮助。

Answer 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")

Answer 2

试试这个代码

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

Answer 3

您可以简单地使用 find 方法使用 value 属性

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

Answer 4

对于占位符不需要复杂的方法函数 jquery 只需像这样使用

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

Answer 5

您可以像这样直接在 html 元素中添加占位符属性

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

或者您可以将 class 添加到您需要放置占位符的所有元素，例如：- .placeholder 并像这样在 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/

你的代码也不错。我们也可以这样做。希望这会奏效。

Answer 6

试试这个。如果您有两个具有相同 class name.

的 input fields，这就是您可以添加 place holder 的方法

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <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(){
 var thelength = $(".tfield").length;
 for(var i=0;i<thelength;i++)
 {
  var theid = $("#field"+i);
  var thename = theid.attr("name");
  alert(thename);
  
  if(thename == "firstname")
  {
   theid.attr("placeholder","name");
  }

 }
});


</script>

</html>

jquery 输入表单的占位符文本

jquery placeholder text for input form

html

javascript

jquery

text

placeholder