값 변경시 양식 텍스트 필드의 코드 이벤트 리스너?

Question

나는 7 개의 텍스트 필드가있는 html 양식을 가지고 있습니다. 기본값에서 값의 변경을 수신 대기하려면 Javascript 이벤트 리스너가 필요합니다. 이벤트 리스너는 텍스트 붙여 넣기, 놓기 또는 입력 여부에 관계없이 format()이라는 함수를 시작해야합니다. 어떻게하면 좋을까요?

는 아래의 HTML 형태 : 그런데

<form class="right_aligned" name="form" method="get" action="" id="form" > 

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="publication" value="Publication..." id="publication" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;" 
ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}"  onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div> 

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="title" value="Article Title..." id="title" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;" 
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div> 

<div style="float: left"><input ondblclick="this.value=''" type="text" name="author" value="Author..." id="author" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;" 
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div> 

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="credentials" value="Credentials..." id="credentials" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;" 
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div> 

<div style="float: left"><input ondblclick="this.value=''" type="text" name="date" value="Date..." id="date" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;" 
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div> 

<div style="float: left;"><input ondblclick="this.value=''" type="textarea" name="evidence" value="Evidence..." id="evidence" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;" 
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div> 

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="tagline" value="Tagline..." id="tagline" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;" 
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div> 

<input class="button" type="reset" value="Clear Form" onClick="clearForm()" style="margin:5px 5px 5px 10px;float:left"> 

</form> 

, 이벤트 리스너 코드는 파이어 폭스에서 작동한다.

Answer 1

당신은 단지 변화 이벤트를 사용할 가능성이 가장 적합합니다. 입력이 포커스를 잃어 버렸을 때에 dispatch됩니다. 이것은 적절한 시간입니다.

<div style="float: left;"> 

스타일이 페이지에 마크 업의 양을 줄이기 위해 CSS를 사용하여 추가해야합니다

코드

는 정말 정리해야 할 매우 자세한 보인다. 또한 한 곳에서 모든 스타일을 제어하고 스타일 시트에서 제어 할 수 있으므로 스타일을 쉽게 제어 할 수 있습니다.

<input ondblclick="this.value=''" 

사용자가 기대하고 있습니까? 텍스트 입력을 두 번 클릭하면 대개 커서 아래에있는 단어가 선택되므로 사용자는 내용을 삭제할 때 놀라실 수 있습니다. 당신은 클래스 또는 다른 선택기를 사용하여 모든 유사한 입력에인가 하나의 규칙을 가지고 있으므로

type="text" name="tagline" value="Tagline..." id="tagline" 
style="..." 

는 다시, 모든 스타일의 물건은 스타일 시트에있을 수 있습니다.

onmouseup="format()" ondrop="format()" 

이러한 모든 이벤트가 서로 어떻게 작용할 수 있다고 생각하십니까?

ondragover="{this.value=''; this.style.color='#000';}" 

그럴까요? 사용자가 다른 입력기로 이동하는 중일 때이 객체 위로 드래그하면됩니다. - 콘텐츠가 없어졌습니다!

onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" 
onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"> 

난 당신이 형식()를 호출하는 단일 onchange를 핸들러 위의 두 핸들러를 제외하고 모두 대체 할 수 있다고 생각합니다. 같은 힌트를 처리하는 기능을

#form input { 
    border:1px solid; 
    border-color:#B0B0B0; 
    width:225px; 
    padding:4px; 
    margin-left:10px; 
    margin-bottom:10px; 
    margin-top:10px; 
    color: #000; 
} 

#form div { 
    float: left; 
} 

및 추가 : 당신이 좋아하는 CSS 규칙에 스타일을 넣어 경우

예를 들어,

는

function updateHint(e) { 
    var el = e.target || e.srcElement; 
    if (e.type == 'focus') { 
    if (el.value == el.defaultValue) { 
     el.value=''; 
     el.style.color='#000'; 
    } 
    } else if (e.type == 'blur') { 
    if(el.value=='') { 
     el.value = el.defaultValue; 
     el.style.color='#000'; 
    } 
    } 
} 

그런 다음 귀하의 의견은 다음과 같습니다

<div> 
    <input onchange="format(this);" type="text" 
    name="publication" value="Publication..." 
    onchange="format(this)" 
    onfocus="updateHint(event);" 
    onblur="updateHint(event);"> 
</div> 

처리기를 동적으로 리스너로 추가하는 것이 좋겠지 만 인라인이 괜찮 으면 인라인을 사용하는 것이 좋습니다. 하고있어.

Answer 2

이 JQuery와 같은 라이브러리와

예를 수행하는 정말 쉬운 것입니다 :

$("form input").change(function(){ 
    format(); 
}); 

Answer 3

이 문제는 이전에 논의 된 바 있습니다. 지금 당장은 질문을 찾을 수 없습니다. 네이티브 DOM은 원하는 것을 지원하지 않습니다 (아시다시피, 포커스가 떠날 때만 실행됩니다). (키, 마우스 오른쪽 ... 등 붙여 넣기, 드래그/드롭, 클릭) 한 후 확인 내용이 사용자에 의해 변경 될 수있는 방법과 연결 가능한 모든 이벤트를 가로 챌 수

1. 시도 : 그 두 가지 선택을 잎 가능한 이벤트가 끝날 때마다 내용이 변경되었는지 확인하십시오.
2. 적당히 느린 타이머를 사용하여 모든 필드의 값을 폴링하여 변경되었는지 확인하십시오.

나는 일반적으로 그들이 CPU-비효율적 인 것 같은 타이머 솔루션의 팬이 아니지만, 형식이 해고 있도록이 입력으로 조정 된 경우 사용자 친화적 인이었다 합리적으로 효율적으로 타이머를 할 수있을 입력 한 후 x 초 동안 멈 춥니 다.

편집 :previous posts 중 하나를 찾았습니다. 그에 따르면 세 가지 가능한 방법으로 "입력"이벤트, 모든 일반 이벤트 (키 업과 같은) 또는 타이머를 연결합니다.