요소의 onfocus 처리기를 Javascript로 변경 하시겠습니까?

Question

필드에 들어가야 할 내용을 설명하는 기본값이있는 양식이 있습니다 (레이블 교체). 사용자가이 함수가 호출 필드 초점을 맞추고 때 :

는

function clear_input(element) 
{ 
    element.value = ""; 
    element.onfocus = null; 
} 

는 onfocus 및이 사용자가 필드에 뭔가를두고 변경하기로 결정하면, 그 입력이 삭제되지 않도록 null로 설정됩니다 (그래서 그것은 단지입니다 한 번 지워짐). 사용자가 데이터를 입력하지 않고 다음 필드로 이동 지금, 만약, 디폴트 값이이 기능 (전화에 onblur)로 복원 :

function restore_default(element) 
{ 
    if(element.value == '') 
    { 
     element.value = element.name.substring(0, 1).toUpperCase() 
          + element.name.substring(1, element.name.length); 
    } 
} 

너무 디폴트 값은의 이름이었다 일어났다 요소 대신에 ID를 추가하는 대신 name 속성을 조작했습니다. 문제는 요소를 건너 뛴 다음 onfocus 이벤트가 clear_input으로 무효화되었지만 결코 복원되지 않는다는 것입니다.

나는 restore_default 함수에서

element.onfocus = "javascript:clear_input(this);"; 

을 추가하지만이 작동하지 않습니다. 어떻게해야합니까? 비트가 필요하다 :

element.onfocus = clear_input; 

또는

element.onfocus = function() { 
    clear_input(param, param2); 
}; 

은 "자바"

function clear_input() { 
    this.value = ""; 
    this.onfocus = null; 
} 

와 (매개 변수)

Answer 1

용도.

Answer 2

나는 조금 다르게 처리 할 것을 제안합니다. 값을 지우는 대신, 단순히 강조 표시하지 않고 사용자가 타이핑을 시작하여 겹쳐 쓰기 만하면됩니다. 그런 다음 기본값을 복원 할 필요가 없습니다 (값을 비우면 여전히 그렇게 할 수 있지만 같은 방법으로). 텍스트가 지워지지 않고 강조 표시된 이후 처리기를 그대로 둘 수 있습니다. 유효성 검증을 사용하여 값이 입력의 원래 값이 아닌지 확인하십시오.

function hightlight_input(element) { 
    element.select(); 
} 

function restore_default(element) // optional, do we restore if the user deletes? 
{ 
    if(element.value == '') 
    { 
     element.value = element.name.substring(0, 1).toUpperCase() 
          + element.name.substring(1, element.name.length); 
    } 
} 

Answer 3

필드가 비어있는 것을 허용하지 않는 것처럼 보이지만 사용자가 필드에 하나 이상의 공백을 넣으면 어떻게됩니까? 이를 막으려면 트리밍해야합니다. (다른 방법을 다듬 으려면 Steven Levithans blog을 참조하십시오).

function trim(str) { 
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 
} 

당신이 정말로 문자열을 투자 할 경우 사용할 수 있습니다

function capitalize(str) { 
    return str.substr(0, 1).toUpperCase() + str.substr(1).toLowerCase(); 
} 

당신이 거기에 있었다 안되는 문제를 만들었습니다 onfocus 및 이벤트를 삭제하여. 더 쉬운 해결책은 if 문을 onfocus 이벤트에 추가하는 것인데, 이것이 디폴트 값일 경우에만 지울 수 있습니다 (하지만 tvanfosson이 제안한 것처럼 선택하는 것이 더 낫습니다).

입력 요소가 자바 스크립트가 비활성화되어 있어도 페이지가 표시 될 때 input 요소에 값이 표시되도록 input 요소에서 value 속성을 설정했다고 가정합니다. 이 값은 element.defaultValue로 사용할 수 있습니다. 이 방법을 사용한 보너스 :

• 기본값은 한 곳에서 정의 할 수 있습니다.
• 더 이상 처리기의 값을 대문자로 변환 할 필요가 없습니다.
• 기본값은 대소 문자를 가질 수 있습니다 (예 : "John Y McMain")
• 기본값은 더 이상 요소 이름과 같을 필요가 없습니다.

.

function clear_default(element) { 
    if (trim(element.value) == element.defaultValue) { element.value = ""; } 
} 

function restore_default(element) { 
    if (!trim(element.value).length) { element.value = element.defaultValue;} 
} 

Answer 4

<!-- JavaScript 
function checkClear(A,B){if(arguments[2]){A=arguments[1];B=arguments[2]} if(A.value==B){A.value=""} else if(A.value==""){A.value="Search"}} 
//--> 

<form method="post" action="search.php"> 
<input type="submit" name="1"> 
<input type="text" name="srh" Value="Search" onfocus="checkClear(this,'Search')" onblur="checkClear(this,' ')"> 
</form>