js 모니터링 양식 값 수정 동기화 문제, 브라우저 간 support_form 특수 효과

달성하려는 기능은 대략 다음과 같습니다.
두 개의 텍스트 상자가 있는데, 그 중 하나는 읽기 전용이고 다른 하나는 입력이 가능합니다. 입력 텍스트 상자에 텍스트를 입력해야 하는 경우 읽기 전용 텍스트 상자가 입력한 값을 얻을 수 있으며, 읽기 전용 텍스트 상자 옆에 프롬프트 메시지가 나타나 읽기 전용 텍스트 상자의 내용을 표시합니다. 실시간.
간단해 보이지만 생각만큼 간단하지 않은 기능입니다. (입력 상자의 처리에 대해서는 논의할 것이 없으며 핵심은 읽기 전용 상자의 처리입니다.)

처음에는 일반적으로 읽기 전용 상자의 onchange 이벤트를 사용하는 것을 생각합니다. 텍스트 상자만. 시도한 후에는 onchange가 전혀 쓸모가 없다는 것을 알았습니다. 이 이벤트는 텍스트 상자가 포커스를 얻은 후 내용이 변경되고 포커스를 잃은 후에 발생합니다. 이제 읽기 전용 텍스트 상자에는 그런 것이 전혀 없습니다. 내용은 js를 통해 변경됩니다. 따라서 다른 방법을 찾아야 합니다.

이때 온라인에서 onpropertychange 이벤트가 발견되었습니다. 이 이벤트는 변경 방법에 관계없이 텍스트 상자 속성이 변경될 때 트리거됩니다. 값뿐만 아니라 속성도 변경된다는 점에 유의하세요. 한번 시도해 보면 정말 효과가 있습니다. 그러나 이 이벤트는 IE에만 ​​적용됩니다. WEB 개발에서는 브라우저 호환성 문제를 고려해야 합니다. 그래서 계속 탐색했습니다...

인터넷에서 또 다른 이벤트인 oninput을 봤습니다. 이는 인터넷 어디에나 있습니다. fireFox의 이 이벤트는 IE의 onpropertychange 이벤트와 동일합니다. 그런데 막상 해보니 전혀 같지 않더군요. oninput 이벤트가 fireFox에서 작동하지 않는 것 같습니다. 일정 기간의 테스트 후에 마침내 oninput이 onpropertychange와 동일하지 않다는 것을 깨달았습니다(심각한 테스트 없이 인터넷의 모든 곳에 다시 게시되었습니다). oninput은 모든 속성이 변경될 때가 아니라 사용자 입력 값이 변경될 때만(즉, 값 변경) 트리거됩니다. 또한 oninput은 js를 통해 값이 변경될 때 트리거되지 않습니다. 이제 나는 우울합니다. 드디어 희망을 보다가 다시 실망에 빠졌습니다. 다행히 절망하지는 않았습니다... 아, 브라우저 호환성 문제가 정말 골치아프네요.

생각해보니 뭔가 떠오르네요. FireFox와 같은 브라우저의 경우 타이머를 사용하여 읽기 전용 텍스트 상자의 내용이 변경되었는지 확인할 수 있습니다. 테스트를 거쳐 드디어 완성되었습니다. 모든 사람과 공유하려면 아래 코드를 게시하세요.

IE에서의 효과:

FireFox에서 렌더링:

또한 Google Chrome(fireFox와 동일)에서도 성공적으로 테스트했습니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

<테이블>
                                                             UserName" type="text" name="jsUserName" 읽기 전용/>
            < ;td> >

JavaScript 코드:





코드 복사

코드는 다음과 같습니다.

$(함수()
                                                                           $(" #userName").get(0).onpropertychange = setJsUserName;
                                       🎜> {
var 간격 이름; > $("#userName").get(0).addEventListener("input",setJsUserName,false);

//포커스를 얻을 때 타이머를 시작합니다.                 // 포커스를 잃었을 때 타이머를 지웁니다.
$("#userName").blur(function()
{
clearInterval(intervalName);
}) 🎜>                                                  ~
함수 setJsUserName()
의 값 {
$("#jsUserName").val($(this).val()); 🎜>                    // jsUserName 입력 값이 변경될 때 실행되는 함수
입니다.
                                                                                                             $("#jsUserName").parent().append("여기 정보를 보면 js를 통해 입력 값을 변경하면 해당 이벤트에도 응답할 수 있음을 알 수 있습니다. < span style="color:red;" style=" color:red;">" $("#jsUserName").val() "");
                                                    ~
참고: 편의상 js 코드는 jQuery를 사용합니다. 안쓰면 똑같습니다.
또한 성능 문제를 고려하여 타이머 시작 시점, 타이머 지우기 및 타이머 지연 시간을 고려할 수 있습니다.
요약:
1. onchange 이벤트와 onpropertychange 이벤트의 차이점:
onchange 이벤트는 콘텐츠가 변경되고(두 콘텐츠가 여전히 동일할 수 있음) onpropertychange 이벤트가 포커스를 잃을 때 트리거됩니다. 실시간으로 트리거됩니다. 즉, 이 이벤트는 문자가 추가되거나 삭제될 때마다 트리거됩니다. 이 이벤트는 js 변경에 의해서도 트리거되지만 이 이벤트는 IE에만 ​​적용됩니다.
2. oninput 이벤트와 onpropertychange 이벤트의 차이점:
oninput 이벤트는 IE를 제외한 대부분의 브라우저에서 지원하는 이벤트로, 실시간으로 값이 변경될 때, 즉 트리거됩니다. 문자가 추가되거나 삭제될 때마다 js를 통해 값이 변경되면 트리거되지 않지만 oninput은 값이 변경될 때만 트리거됩니다. addEventListener(), onpropertychange 등록 방법은 일반 이벤트와 동일합니다. (여기서는 모두 콘텐츠와 동작의 분리를 달성하기 위해 js에서 이벤트를 동적으로 바인딩하는 것을 의미합니다.)
3. oninput 및 onpropertychange가 실패할 때의 상황:
(1) oninput 이벤트: a). b) 브라우저의 자동 드롭다운 프롬프트에서 선택할 때 스크립트가 실행되지 않습니다.
(2) onpropertychange 이벤트: 입력이 비활성화=true로 설정되면 onpropertychange가 트리거되지 않습니다.
질문이 있거나 제가 작성한 내용이 잘못된 경우 언제든지 연락주시거나 수정해 주시기 바랍니다.