$("选择器").attr("placeholder", "字符1" + 变量 + " 字符2");
使用attr()方法可以修改元素属性
例:
$("#importchapterId").attr("placeholder", "ID:" + examChapterId + " 已被使用");
实例:
检查用户输入的ID是否重复
重复则标红
完整代码如下:
HTML部分
<input type="text" id="importchapterId" oninput="value=value.replace(/[^\d]/g, '')">
//oninput="value=value.replace(/[^\d]/g, '')"正则为只能输入数字
JavaScript部分
$("#importchapterId").blur(function () { //当输入框失焦时触发
var examChapterId = $("#importchapterId").val(); //获得用户输入的信息
if (examChapterId != null || examChapterId != undefined) { //防空
$.ajax({ //与后端交互
url: "./common/BuildExam/checkChapterId.ashx",
type: "post",
data: {
"examChapterId": examChapterId, //发送用户输入的ID
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("检查章节ID失败,请联系管理员");
alert(examChapterId);
},
success: function (data) { //如果数据库中已有此ID则返回false
if (!data) {
$("#importchapterId").val(""); //清空输入框信息(不可缺失!!!)“placeholder”只在input中没有值时才显示
$("#importchapterId").attr("placeholder", "ID:" + examChapterId + " 已被使用"); //将用户输入的信息与提示信息拼接
$("#importchapterId").css("border", "1px solid #ef4136"); //边框变红
}
}
});
}
});
$("#importchapterId").focus(function () { //当输入框获得焦点时输入框取消标红
$("#importchapterId").css("border", "1px solid #ced4da");
});