使用 jquery 更改占位符文本字体和颜色
Posted
技术标签:
【中文标题】使用 jquery 更改占位符文本字体和颜色【英文标题】：changing placeholder text font and color with jquery 【发布时间】：2018-09-19 13:55:36 【问题描述】：我有一个如下形式的输入标签
<input type="text" name="firstname" id="firstname" placeholder="First name">
首先我使用 jquery 检查该字段是否为空
$("#submitreg").click(function(e)
if ($.trim($("#firstname").val())=='')
$("#firstname").attr('placeholder',"first name can't be empty");
e.preventDefault();
);
现在如果输入字段为空，我将占位符更改为“名字不能为空”。是否也可以将占位符颜色更改为红色并使用 jquery 将字体设置为 85%。
谢谢
【问题讨论】：
你的问题是什么？ 如何使用jquery将占位符颜色更改为红色并使占位符的字体为85% jQuery change placeholder text color的可能重复 @GokulSandeep 这些解决方案不起作用 你的想法是，如果文本框是空的，那么占位符会是红色，字体是 85%？ 【参考方案1】：你可以这样做：
$('#form-id').submit(function(e) //Add event listener on form and not on btn click
if ($('#firstname').val().trim() === '') //Check if empty string
$("#firstname").attr('placeholder', "first name can't be empty"); //Change attribute
$("#firstname").val(''); //Remove the value so that youll see the new attribute
$("#firstname").addClass('red'); //Add a class so that placeholder will be red.
e.preventDefault(); //Prevent the form on sending
);.red::placeholder /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
.red:-ms-input-placeholder /* Internet Explorer 10-11 */
color: red;
.red::-ms-input-placeholder /* Microsoft Edge */
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='form-id'>
<input type="text" name="firstname" id="firstname" placeholder="First name">
<input type="submit" value="Submit">
</form>【讨论】：
感谢如何确保所有浏览器都支持【参考方案2】：我想这就是你要找的东西
此 CSS 将不支持所有浏览器
-webkit-input-placeholder、::placeholder、::-moz-placeholder、:-ms-input-placeholder 在这些链接中更喜欢Browser compatibility
$("#submitreg").click(function(e)
$("#firstname").val($.trim($("#firstname").val()));
if ($.trim($("#firstname").val())=='')
$("#firstname").attr('placeholder',"first name can't be empty");
$("#firstname").addClass('your-class');
e.preventDefault();
else
$("#firstname").removeClass('your-class');
);.your-class:-moz-placeholder
color: red;
font-size: 20px;
.your-class::placeholder
color: red;
font-size: 20px;
.your-class:-ms-input-placeholder
color: red;
font-size: 20px;
.your-class::-webkit-input-placeholder
color: red;
font-size: 20px;
input
height: 30px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="firstname" id="firstname" placeholder="First name" />
<button type="submit" id="submitreg">Submit</button>【讨论】：
这正是我想要的。我的问题是所有浏览器都支持这个 查看我的编辑帖子。我已经为每个 csspseudo-class 附加了浏览器支持【参考方案3】：
<!DOCTYPE html>
<html>
<head>
<style>
.your-class1::-webkit-input-placeholder
color: red
.your-class2::-webkit-input-placeholder
color: black
</style>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function()
//Attach change event to textbox
$("#textbox1").change(function()
//Check if value is empty or not
if ($(this).val() == "")
//if empty then assign the border
$("#textbox1").addClass('your-class1');
else
$("#textbox1").addClass('your-class2');
);
);
function validatetextbox()
var txtval = $("#textbox1").val();
//Check if value is empty or not
if (txtval == "")
//if empty then assign the border
$("#textbox1").addClass('your-class1');
else
$("#textbox1").addClass('your-class2');
</script>
</head>
<body>
<input type="text" id="textbox1" placeholder="Placeholder text...">
<input type="submit" value="Submit" onclick="validatetextbox()">
</body>
</html>【讨论】：
以上是关于使用 jquery 更改占位符文本字体和颜色的主要内容，如果未能解决你的问题，请参考以下文章