JavaScript는 텍스트 상자_javascript 기술을 클릭하여 지운 후 자동으로 기본 텍스트를 복원합니다.
- WBOY원래의
- 2016-05-16 15:20:401392검색
본 글의 예시에서는 텍스트 상자를 클릭하여 기본 텍스트를 지우고 그대로 둔 후 복원하는 js 예시 코드를 소개하고 있으며, 참고용으로 모두에게 공유합니다.
관련 지식:
1. onclick 이벤트 정의 및 사용법:
이 이벤트는 개체를 클릭할 때 트리거됩니다.
브라우저 지원:
1) IE 브라우저는 이 이벤트를 지원합니다.
2) Firefox 브라우저는 이 이벤트를 지원합니다.
3) Opera 브라우저는 이 이벤트를 지원합니다.
4) 구글 크롬에서는 이 이벤트를 지원합니다.
5) Safria 브라우저는 이 이벤트를 지원합니다.
예제 코드:
<html>
<head>
<meta charset="gb2312"/>
<title>脚本之家</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
위 코드는 div에 대한 onclick 이벤트 핸들러를 등록합니다. div를 클릭하면 이 핸들러가 실행되어 div의 배경색을 녹색으로 설정합니다.
2. 온블러 이벤트 정의 및 사용법:
이 이벤트는 지정된 개체가 포커스를 잃을 때 트리거됩니다.
예제 코드:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>脚本之家</title>
<style type="text/css">
.mytest{
background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var username=document.getElementById("username");
username.focus();
username.onblur=function(){
username.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<input type="text" name="username" id="username" />
</body>
</html>
위 코드는 입력 요소의 onblur 이벤트에 이벤트 핸들러 함수를 바인딩합니다. 입력 요소가 포커스를 잃으면 배경색을 녹색으로 설정할 수 있습니다.
다음 단계가 가장 중요합니다. 텍스트 상자를 클릭하여 기본 텍스트를 지우고 그대로 둔 다음 복원하세요
많은 웹사이트에서 채워야 하는 텍스트 상자에는 기본적으로 기본 프롬프트 언어가 제공됩니다. 이 텍스트 상자를 마우스로 클릭하면 입력된 텍스트가 삭제되고 포커스가 맞춰지면 내부의 기본 텍스트가 지워집니다. 텍스트 상자를 그대로 둡니다. 그런 다음 텍스트 상자에 기본 텍스트를 씁니다.
코드는 다음과 같습니다.
<html>
<head>
<meta charset="gb2312">
<title>点击文本框清除默认值</title>
<script type="text/javascript">
window.onload=function()
{
var username=document.getElementById("username");
username.onclick=function()
{
if(username.value=="请输入您的姓名")
{
username.value="";
this.focus();
}
}
username.onblur=function()
{
if(username.value=="")
{
username.value="请输入您的姓名";
}
}
}
</script>
</head>
<body>
<input type="text" value="请输入您的姓名" id="username" />
</body>
</html>
위의 코드는 텍스트 상자를 클릭하면 텍스트 상자의 내용을 지울 수 있습니다. 이때 마우스 포커스가 텍스트 상자를 벗어나면 텍스트 상자의 값이 기본 상태로 복원됩니다. 그러나 비밀번호 상자가 일반 텍스트로 표시되지 않기 때문에 비밀번호 상자가 약간 번거롭다면 비밀번호 상자에 프롬프트를 구현하는 방법에 대한 다음 단락에서 해결책을 찾을 수 있습니다.
비밀번호 상자에 나타나는 메시지를 인식하는 방법:
때때로 로그인 양식에 "사용자 이름을 입력하세요", "비밀번호를 입력하세요"와 같은 프롬프트 언어가 필요할 때가 있습니다. 사용자 이름은 말하기 쉽지만 " 비밀번호를 입력하세요"라는 메시지가 비밀번호 상자에 나타납니다. 이런 종류의 언어는 비밀번호 상자에 입력한 내용이 명확한 코드로 표시되지 않기 때문에 약간 번거롭습니다. type 속성이 동적으로 제어되면 호환성 문제가 발생합니다. 입력이 페이지에 이미 있으면 type 속성은 IE8 및 IE8 이하 브라우저에서 읽기 전용입니다. 그래서 다른 방법을 생각해 봐야 합니다. 코드는 다음과 같습니다.
<html>
<head>
<meta charset="gb2312">
<title脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd");
tx.onfocus=function(){
if(this.value!="密码")
return;
this.style.display="none";
pwd.style.display="block";
pwd.value="";
pwd.focus();
}
pwd.onblur=function(){
if(this.value!=""){
return;
}
this.style.display="none";
tx.style.display="";
tx.value="密码";
}
}
</script>
</head>
<body>
<input type="text" value="密码" id="tx"/>
<input type="password" id="pwd" />
</body>
</html>
위 코드는 우리의 요구 사항을 구현합니다. 비밀번호를 입력하면 비밀번호 모드로 입력됩니다.
구현 원리는 매우 간단합니다. 기본 상태에서는 텍스트 상자가 type="text"로 표시됩니다. 텍스트 상자를 클릭하면 원래 표시된 텍스트 상자가 숨겨집니다. , 이는 단지 대체품임을 의미합니다.
이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.