как контролировать значение ввода HTML, измененное с помощью JavaScript - PullRequest
Новая
       10

как контролировать значение ввода HTML, измененное с помощью JavaScript

0 голосов
/ 19 февраля 2019

Мы можем использовать jquery для отслеживания изменения входного значения html, но я сбиваю с толку, если входное значение изменилось с помощью javascript, можем ли мы его отслеживать?Я не могу переписать код другого человека, поэтому я не могу добавить focus и blur для отслеживания изменения значения.Я должен сказать это снова, изменение входного значения с помощью JavaScript, а не клавиатуры или мыши.

Я пробовал это с помощью jquery, но ничего не получил, вот код.

 <div style="display:none;" canshow="false"><input 
 name="extendDataFormInfo.value(fd_37157d8be9876e)" value="GT-2013-FT- 
 SZ·G-007-3" type="hidden"></div>

 $("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").bind('input 
  porpertychange',function(){
     console.log('666')
  });

Я пишу этот HTML-код для этого вопроса 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div style="display:none;">
        <input name="extendDataFormInfo.value(fd_37157d8be9876e)" 
value="Initial value" type="hidden">
    </div>
    <a href="javascript:void(0)" onclick="change()">change_input_value</a>
</body>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script type="text/javascript">
    function change () {// I suppose this is the function and it can not be 
 rewrited

 $("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").val("changed 
  value")
    }
    //now show me how to monitor the input value change , you can not alter  the change function
    </script>
   </html>

Я хочу, чтобы консоль могла показывать 666, на самом деле мне нужно что-то сделать в функции связывания.И есть более 10 элементов ввода, но мне нужно контролировать только один элемент ввода.Я должен контролировать изменение входного значения, чтобы я мог что-то сделать после его изменения, вы понимаете, что я имею в виду?Можете дать мне совет?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Это хак, но если вы не можете изменить другой код, один из вариантов - поместить геттер и сеттер на сам input, чтобы другие коды input.value = ... и $(input).val(..) проходили через вашпользовательская функция (вместо вызова методов получения и установки HTMLInputElement.prototype): 

const input = document.querySelector('input');
// need to save the native getter and setter methods, so they can be invoked later
const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(input, 'value', {
  get() {
    return get.call(this);
  },
  set(newVal) {
    set.call(this, newVal);
    console.log('New value set by JS detected: ', newVal);
    // insert desired functionality here
    return newVal;
  }
});

input.value = 3;
$('input').val(5);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input>

Еще один фрагмент кода, используя ваш код: 

const input = document.querySelector('input');
// need to save the native getter and setter methods, so they can be invoked later
const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(input, 'value', {
  get() {
    return get.call(this);
  },
  set(newVal) {
    set.call(this, newVal);
    console.log('New value set by JS detected: ', newVal);
    // insert desired functionality here
    return newVal;
  }
});


function change() { // I suppose this is the function and it can not be rewrited
  $("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").val("changed value ")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display:none;">
  <input name="extendDataFormInfo.value(fd_37157d8be9876e)" value="Initial value" type="hidden">
</div>
<a href="javascript:void(0)" onclick="change()">change_input_value</a>
0 голосов
/ 19 февраля 2019

Вы можете связать событие change. 

 $("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").bind('change', function() {
    console.log('666')
 });

Или просто вызвать метод change. 

 $("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").change(function() {
    console.log('666')
 });
...