지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 입력 상자_javascript 기술에서 프롬프트 정보 표시 및 숨기기를 제어하는 ​​방법

입력 상자_javascript 기술에서 프롬프트 정보 표시 및 숨기기를 제어하는 ​​방법

WBOY
풀어 주다： 2016-05-16 17:00:21
원래의
2769명이 탐색했습니다.

html css javascrpt를 사용하여 페이지를 만들 때 사용자 경험에 영향을 미치고 쉽게 간과되는 몇 가지 작은 세부 사항을 자주 접하게 됩니다. 예를 들어, 입력 상자의 프롬프트 정보는 개체의 초점 획득 및 상실에 따라 어떻게 표시되거나 숨겨질 수 있습니까? 저는 오늘 이 작은 트릭을 여러분과 공유하고 싶습니다. 모든 고수들이 실수하지 않기를 바랍니다~~~

1. 요구 사항

입력 상자, 프롬프트 정보 숨기기 커서가 표시될 때 ; 커서가 입력 상자를 벗어나면 프롬프트 메시지가 표시됩니다.

2. 메소드

1. 입력에 ID 이름을 지정합니다. Onfocus="메소드 이름 1(this)", onblur="메소드 이름 2(this)"

2. 변수 값을 선언하고 id 이름으로 입력을 받습니다

3. 함수 메서드 이름 1 (inputObj){

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

if(inputObj.value==”…”){

inputObj.value=”””;
}

}

4. 함수 메소드 이름 2(inputObj){

코드 복사 코드는 다음과 같습니다.
if(inputObj.value==””){

inputObj.value="…”;

}

}

5. 참고: 동일한 설정이 필요한 동일한 페이지에 입력 태그가 여러 개 있는 경우 메서드 이름이 일관될 수 없습니다.

3. 예시

코드 복사 코드는 다음과 같습니다.
;html xmlns ="http://www.w3.org/1999/xhtml">


제목 없는 문서

style type="text/css">
/*다음 텍스트는 IE 브라우저에서 입력 상자의 배경색을 변경할 수 있습니다*/
.search input{star : 표현식(onmouseover =function(){
this.style.BackgroundColor="#FF0000"
},
onmouseout=function(){
this.style.BackgroundColor="#FFFFFF"
})
}





관련 라벨：
提示信息
원천：php.cn
이전 기사：ie8 일반 mode_jquery에서 확인된 jquery 선택 문제 다음 기사：Raphael.js는 중국 지도 지도 그리기 방법_javascript 기술을 그립니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹사이트에서 입력 요소를 가져올 수 없습니다. 그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
입력 필드 메소드의 총 반환 값을 가져옵니다. 사용자가 입력한 총 가치를 구하려고 합니다. 숫자에 동일한 값을 곱하는 집계 가져오기 letDem200=document.querySelector(".in...
에서 2024-04-06 18:19:37
0
1
380
부분 값 조건에서 쿼리 기록 - SQL 기술 공유 code라는 열이 있는 zipcode라는 테이블이 있습니다. Code 열에는 우편번호 접두사가 포함됩니다(예: 395453302120312). 제공된 우편번호가 ...
에서 2024-04-06 16:01:26
0
1
395
클리어 후에도 내 파일 입력값은 그대로 남아있습니다 스크린샷에서 볼 수 있듯이. 파일을 선택하고 페이지를 새로 고치지 않고 팝업을 유지한 후 다시 열면 파일 입력이 여전히 내가 선택한 파일입니다. <input...
에서 2024-04-06 15:44:52
0
1
384
고정 위치의 자식이 부모의 패딩을 무시함 고정 요소가 헤더 뒤로 이동하는 것을 방지하는 방법은 무엇입니까? 현재 코드 조각은 상위 항목에 padding-top을 사용합니다. 또한 추가 하위 항목에 mar...
에서 2024-04-06 11:42:51
0
1
338
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿