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" />

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

2 个答案: