如何根据占位符的大小动态更改输入字段的大小

时间:2017-12-14 23:24:21

标签: javascript jquery html

我正在生成一个字符串,它将动态地作为API的URI,并基于URL参数等的用户输入。

我正在使用嵌套的EventListener来捕获构建资源字符串所需的文本输入,并且该字符串是我放置在只读文本字段中以供用户根据需要进行复制/粘贴。

我的问题是,在最后一个事件监听器捕获用户的输入之后,我用来调整占位符文本字段大小的函数不会捕获所需的最后一个字符串的长度,并且无法相应地调整文本字段的大小。该函数足以调整字段大小以捕获用户输入的倒数第二个字符串。

这是我用来调整占位符文本字段大小的函数:

function fieldSize(){
    // Script to change the size of the resource field based on the length of the value
    $("input[placeholder]").each(function() {
        // Bug Must fix
        $(this).attr('size', (($(this).attr('placeholder').length)));
    });
}

这是我用来构建文本字段大小的嵌套偶数监听器。您可以在最里面的事件侦听器中看到调用fieldSize()函数:

// Function to dynamically generate Endpoint Resource for Token Create Notification
function endpointResourceCreateToken(){
    // Dynamically change placeholder value depending on URL & Query Parameters
    $("#eventID").on("input", function(event) {
        var tridInput = ($("#inputTokenRequestorID").val() || "").trim();
        var trefidInput = ($("#inputTokenReferenceID").val() || "").trim();
        var eventTypeInput = ($("#eventType").val() || "").trim();
        var eventIDinput = ($("#eventID").val() || "").trim();

        //if any of the fields are blank, return and don't do anything
        if (!tridInput || !trefidInput || !eventTypeInput || !eventIDinput) return;

        // Build URI Resource and display to DOM
        $("#resource").attr('placeholder', "/vtis/tokenRequestors/" + tridInput + "/tokens/" + trefidInput + "/tokenChanged?eventType=" + eventTypeInput + "&eventID=" + eventIDinput);
        fieldSize();
    });
}

这是html,我嵌入了构建端点所需的不同脚本,并调整了存储URI的字段:

// Endpoint Resource
                    "<strong>Endpoint Resource</strong>" +

                    "<script>" +
                        // Call script to piece together endpoint
                        "endpointResourceCreateToken()" +
                    "</script>" +

                    // Endpoint for user
                    "<div class=\"form-group\">" +
                        "<input id=\"resource\"class=\"form-control \" type=\"text\" placeholder=\"Please Enter URL & Query Parameters\" readonly>" +

                        "<script>" +
                            "fieldSize()" +
                        "</script>"

如何捕获最后一个输入字符串的长度,以便正确调整占位符文本字段的大小????

谢谢!

0 个答案:

没有答案