输入表单的jquery占位符文本答案

【问题标题】：jquery placeholder text for input form输入表单的jquery占位符文本
【发布时间】：2017-01-01 10:22:38
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html text placeholder

【解决方案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")

【讨论】：

如果有两个文本字段，我只想将占位符放一个，并且两个文本字段都具有相同的类？
@shamimkhan，您将如何确定需要在哪个文本字段中设置占位符，我的意思是标准是什么？
有两个输入字段，我需要为第一个输入字段添加占位符
@shamimkhan，更新答案

【解决方案2】：

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

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

【讨论】：

所以如果没有正确设置占位符，则会设置此值
如果已经设置它将替换占位符的值

【解决方案3】：

你可以像这样直接在你的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/

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

【讨论】：

我认为仅将插件用于占位符是个坏主意
会降低代码的复杂度。而且它不会造成更大的伤害，因为它只是一个简单的代码sn-p。如果您想使用它，请使用它。或尝试 jquery 方法。
如果您不想使用插件，那么最好的方法是将类广告到元素并为该类放置占位符属性

【解决方案4】：

试试这个代码

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

试试这个。如果您有两个 input fields 和相同的 class name，这就是添加 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>

【讨论】：