输入表单的jquery占位符文本

时间:2016-08-25 05:51:36

标签: javascript jquery html text placeholder

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

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

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

6 个答案:

答案 0 :(得分: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")

答案 1 :(得分:1)

您可以使用find属性

简单地使用value方法
$('.mfilter-search').find("input[type=text][!value]").attr("placeholder", "Refine Your Search");

答案 2 :(得分:0)

试试此代码

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

您可以直接在html元素中添加占位符属性,如此

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

或者你可以为你需要放置占位符的所有元素添加一个类,例如: - .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/

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

答案 5 :(得分:0)

试试这个。如果您有两个place holder具有相同的input fields,则可以添加class name

<!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>