我有以下表格的输入标签
<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();
}
});
现在,如果输入字段为空,我将占位符更改为&#34;第一个名称不能为空&#34;。是否也可以将占位符颜色更改为红色,并使用jquery将字体设置为85%。
由于
答案 0 :(得分:2)
您可以执行以下操作:
$('#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
}
});
&#13;
.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;
}
&#13;
<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>
&#13;
答案 1 :(得分:1)
我认为这就是你在寻找什么
此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');
}
});
&#13;
.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;
}
&#13;
<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>
&#13;
答案 2 :(得分:0)
<!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>