jQuery-向输入添加值，但是一个输入没有“ .value”属性

Question

所以我想有一个函数，它可以像真实的人类一样写输入（通过触发所有事件），这是我写的代码：

仔细查看“ element.value + = text_array [i]”部分。

function FillInText(element_id, text){
    var element = $("#"+element_id);
    element.focus();
    element.click();

    var kdown = jQuery.Event("keydown");
    var kup = jQuery.Event("keyup");

    var text_array = text.split("");

    for(i = 0; i < text_array.length; i++){
        var code = text_array[i].charCodeAt(0);
        kdown.which = code;
        kup.which = code;

        element.trigger(kdown);
        element.change();
        element.value += text_array[i];
        element.trigger(kup);        
    }
    element.blur();
}

该代码非常适合任何输入，并且99％的时间都有效。 但是有一个输入字段，其值未存储在其“ .value”属性中。 当我尝试使用该值设置/获取值时，什么也没有返回。 但是，我可以使用JQuery的“ val（）”函数来获得它。

但是，“ Element.value”的完美之处在于您可以将一些值添加到现有值中。 据我所知，您不能使用“ val（）”来做到这一点。 虽然您可以使用：

val(function(index,currentvalue){
        return currentvalue + text_array[i];
});

代码像这样让人难以理解：previousValue是“ a”，addedValue是“ b”。 输入字段为“ a”，它取“ b”并将其加在一起，然后放入输入中。 因此它不会添加“ a”，而是删除现有的，然后向其添加“ ab”。 当使用“ element.value + ='b'”时，它甚至不触及previousValue，而是将其添加到其中。 我想要一个像这样的函数：

element.val() += "b";

希望您能理解我的问题...很抱歉，如果我解释不好。

Answer 1

我认为您的代码不适用于任何输入。

.value是DOM属性，但是element包含jQuery对象，而不是DOM元素。 您可以通过建立索引来获取相应的DOM元素：

element[0].value += test_array[i];

您可以使用jQuery .val()将值添加到函数中：

element.val(function(_, old_value) {
    return old_value + test_array[i];
}

Answer 2

通常，jQuert的选择器（如$("#element")是包含元素的数组，例如[DOMElement, DOMElement,...]并且要使用纯Java脚本属性或方法，请使用$("#element")[0]

https://www.w3schools.com/jquERY/jquery_ref_selectors.asp

但是在纯JS中， document.getElementById("element")是纯元素对象。

https://www.w3schools.com/jsref/dom_obj_all.asp

检查一下

 //jQuery's prototype jQuery.fn.FillInText = function(text) { var el = $(this),kc,kd,ku el.focus().click(); for(var i=0;i < text.length;i++) { kc = text.charCodeAt(i); kd = jQuery.Event("keydown", { keyCode: kc }); ku = jQuery.Event("keyup", { keyCode: kc }); el.trigger(kd); el.change(); el[0].value += text[i]; // + "b" el.trigger(ku); } } //Test listening to keyup, keydown events $("#inp").on("keydown keyup", function(e) { console.log(e.type + ": " + String.fromCharCode(e.keyCode)) }) //Go.. $("#inp").FillInText("This is test string") 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="inp" />