jQuery修改placeholder属性

MskT

已于 2022-09-02 11:56:13 修改

阅读量5.6k

点赞数 2

分类专栏：前端文章标签： jquery html javascript

于 2021-09-08 18:00:06 首次发布

本文链接：https://blog.csdn.net/ID_car/article/details/120184951

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

$("选择器").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");
    });