순수 자바스크립트는 입력 값 변경을 듣기

순수 자바스크립트는 입력 값 변경을 듣기

입력 값이 변경되면 즉시 무언가가 트리거되도록 입력을 듣는 상수 함수를 만들 수 있는 방법이 있습니까?

저는 순수 자바스크립트, 플러그인, 프레임워크를 사용하지 않고 HTML을 편집할 수 없는 무언가를 찾고 있습니다.

예를 들면 다음과 같습니다.

입력의 값을 변경할 때MyObject, 이 함수는 실행됩니다.

이것이 바로 이벤트의 목적입니다.

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

기본적인 예로...

HTML:

<input type="text" name="Thing" value="" />

스크립트:

/* Event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);

/* Function */
function doThing(){
   alert('Horray! Someone wrote "' + this.value + '"!');
}

다음은 http://jsfiddle.net/Niffler/514gg4tk/ 입니다.

사실, 체크 표시된 답은 정확히 맞지만, 답은 안에 있을 수 있습니다.ES6모양:

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

또는 아래와 같이 적을 수 있습니다.

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});

기본사용량

el.addEventListener('input', function () {
    fn();
});

그러나 자바스크립트를 통해 입력값을 수동으로 변경할 때 이벤트를 실행하려면 사용자 지정 이벤트('myEvent', 'ev' 등과 같은 임의의 이름)를 사용해야 합니다.양식 '변경' 또는 '입력' 이벤트를 들어야 하고 자바스크립트를 통해 입력값을 변경하면 사용자 지정 이벤트를 '변경' 또는 '입력'으로 명명할 수 있습니다.

var event = new Event('input');
el.addEventListener('input', function () {
  fn();
});
form.addEventListener('input', function () {
  anotherFn();
});


el.value = 'something';
el.dispatchEvent(event);

이벤트 생성 및 트리거링

2021년의 또 다른 접근 방식은 다음과 같습니다.document.querySelector():

const myInput = document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change", (e) => {
  // here we do something
});

HTML 양식 입력에는 많은 이벤트가 포함되어 있습니다.HTMLElement의 사이드바에서 Events 메뉴로 이동하여 확장합니다.다음과 같은 유용한 이벤트를 많이 볼 수 있을 것입니다.beforeinput,change,copy,cut,input,paste, 드래그 드롭 이벤트를 선택합니다.

iput&change

그beforeinput,그리고.input폼 입력 값을 입력하면 이벤트가 순서대로 실행됩니다.

양식 입력 값이 변경되어 해당 입력에 초점을 잃었을 때,change이벤트가 종료됩니다.

잘라내기, 복사 및 붙여넣기

입력 값을 자를 때(CTRL키보드 바로가기에서 +),cut,beforeinput,input이벤트가 발생합니다.복사할 때(키보드 바로가기의 CTRL+C),copy이벤트는 단독으로 발사됩니다.

클립보드의 Ctrl값(키보드 바로가기의 +)을 붙여넣으면paste,beforeinput,input이벤트가 발생합니다.

자바스크립트 변경 값

자바스크립트로 입력값을 변경하고 중요한 이벤트를 작동시키기 위해서는 최소 두 개 이상의 이벤트를 순서대로 발송해야 합니다.하나는input그리고 두개는change. 코드를 집중해서 들을 수 있도록 하기 위해input아니면change이벤트. 이렇게 하는 게 더 쉬워요.

샘플 코드는 모두 여기 있습니다.

(() => {
    let inputText = document.getElementById('text');
    let submitBtn = document.getElementById('submit');
    let triggerJSBtn = document.getElementById('button');

    submitBtn.addEventListener('click', (event) => {
        event.preventDefault(); // just prevent form submitted.
    });

    triggerJSBtn.addEventListener('click', (event) => {
        const thisTarget = event.target;
        event.preventDefault();
        inputText.value = thisTarget.innerText;
        inputText.dispatchEvent(new Event('input'));
        inputText.dispatchEvent(new Event('change'));
    });

    inputText.addEventListener('beforeinput', (event) => {
        const thisTarget = event.target;
        console.log('beforeinput event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('input', (event) => {
        const thisTarget = event.target;
        console.log('input event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('change', (event) => {
        const thisTarget = event.target;
        console.log('change event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('cut', (event) => {
        const thisTarget = event.target;
        console.log('cut event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('copy', (event) => {
        const thisTarget = event.target;
        console.log('copy event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('paste', (event) => {
        const thisTarget = event.target;
        console.log('paste event. (%s)', thisTarget.value);
    });
})();

/* For beautification only */

code {
    color: rgb(200, 140, 50);
}

small {
    color: rgb(150, 150, 150);
}

<form id="form">
    <p>
        Text: <input id="text" type="text" name="text">
    </p>
    <p>
        Text 2: <input id="text2" type="text" name="text2"><br>
        <small>(For lost focus after modified first input text so the <code>change</code> event will be triggered.)</small>
    </p>
    <p>
        <button id="submit" type="submit">
            Submit
        </button>
        <button id="button" type="button">
            Trigger JS to set input value.
        </button>
    </p>
    <p>Press F12 to view results in your browser console.</p>
</form>

를 눌러 브라우저의 콘솔을 열고 결과를 확인하십시오.

사용자가 값을 입력할 때마다 무언가를 해야 합니다.

var element = document.getElementById('input');
element.addEventListener('input', function() {
 // Do something 
});

IMHO님, 단지 'on change'를 'on input'으로 잘못 알고 있는 것이고, 그것은 두 가지 다른 것입니다.

키다운, 키업 및 입력은 입력이 변경되면 즉시 실행되는 이벤트입니다.

키다운이나 입력 이벤트를 사용하여 입력 상자에서 변경된 값을 가져옵니다.

const myObject = document.getElementById('Your_element_id');
myObject.addEventListener('keydown', function (evt) {
// Your code goes here 
 console.log(myObject.value);
});

키보드에 키 입력이 있을 때마다 변경 사항을 모니터링하려면,

const textarea = document.querySelector(`#string`)
textarea.addEventListener("keydown", (e) =>{
   console.log('test') 
})

id 대신 title을 사용하여 요소를 식별하고 아래와 같이 코드를 작성합니다.

$(document).ready(() => {
    $("input[title='MyObject']").change(() => {
        console.log("Field has been changed...")
    })
});

언급URL : https://stackoverflow.com/questions/26946235/pure-javascript-listen-to-input-value-change