jQuery - добавление значения к вводу, но один вход не имеет свойства ".value"

ProgramBox

jQuery — добавление значения к вводу, но один вход не имеет свойства «.value»

Post author:admin
Запись опубликована:28 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Итак, я хочу иметь функцию, которая записывает на вход, как настоящий человек (запуская все события) Это код, который я написал:

Внимательно посмотрите на часть «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];
});

Код определяет его следующим образом:
Предыдущее значение равно «a», а добавленное значение равно «b».
Поле ввода было «a», оно принимает «b» и складывает их вместе, а затем вводит во ввод. таким образом, он не ДОБАВЛЯЕТ «a», а скорее удаляет существующий, а затем добавляет к нему «ab». При использовании «element.value = ‘b'» он даже не затрагивает предыдущее значение, вместо этого он просто добавляет его к нему.
Я бы хотел, чтобы функция была похожа:

 element.val()  = "b";

Надеюсь, вы понимаете мою проблему… Извините, если я плохо объяснил это.

1. Что <input> это за значение?

2. Я думаю, что событие щелчка должно быть перед фокусом.

3. @Jack Bashford Я думаю, что это обычный ввод текста, но если вы хотите исследовать самостоятельно (что я был бы очень признателен c:), источник » signup.live.com «, это ввод «Проверка».

4. @Barmar это не имеет значения, это работает для любого другого поля ввода.

5. В этом нет необходимости text_array . Вы можете выполнять итерации через text себя и использовать text.charCodeAt(i) .

Ответ №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];
}

1. Он работает со всеми остальными полями ввода, и, насколько я знаю, вы можете настроить таргетинг на все свойства DOM, когда у вас есть элемент jQuery. Кроме того, я думаю, вы неправильно поняли мой вопрос (скорее всего, это мое плохое объяснение) Код, который вы написали, ТОЧНО такой же, как и я, и это не работает. Если бы вы могли внимательно прочитать вопрос, я был бы очень признателен, потому что я вижу, что у вас отличный опыт.

2. Мой код не совсем такой, как ваш. Я писал element[0].value , у вас его нет [0] . Я никогда не слышал о возможности использования свойств DOM для объектов jQuery. Я только что попробовал это сам, и это не сработало.

3. используйте это: jsfiddle.net/ruxvop5L это почти тот же код, только на моем языке, но он должен работать. Это полностью спагетти-код, я это знаю. Он находится в разработке, поэтому его (как я думаю) немного легче понять для меня. Я не настолько опытен. Но спасибо за вашу помощь 🙂

4. Скрипка не имеет HTML и никогда не вызывает функцию. Как я должен его использовать?

5. Когда я добавил HTML и библиотеку jQuery, ваша скрипка работает: jsfiddle.net/barmar/gj91ocfL/1

Ответ №2:

В общем случае селектор jquert’а like $("#element") представляет собой массив, содержащий элементы, например [DOMElement, DOMElement,...] , и для использования чистых свойств или методов Java Script используйте $("#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»