JavaScript에서는 onfocus 이벤트를 사용하여 입력 시 색상이 변경되도록 텍스트 상자를 설정할 수 있습니다. onfocus 이벤트를 요소에 바인딩한 다음 "object.style.Background="color value""를 사용하기만 하면 됩니다. onfocus 이벤트는 객체가 초점을 얻을 때 발생하며 일반적으로 양식에 사용됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
동적으로 텍스트 상자 색상 설정:
主要是利用javascript中的触发事件onfocus
<script language="javascript" type="text/javascript">
<!--
function myFocus(obj,color){
//判断文本框中的内容是否是默认内容
if(obj.value=="请输入收件人地址"){
obj.value="";
}
//设置文本框获取焦点时候背景颜色变换
obj.style.backgroundColor=color;
}
function myblur(obj,color){
//当鼠标离开时候改变文本框背景颜色
obj.style.background=color;
}
在input标签中
<input type="text" name="username" id="username" onfocus="myFocus(this,'#f4eaf1')" onblur="myblur(this,'white')" value="请输入收件人地址"/>
用上述简单方法可以做到文本框背景颜色的变换和提示信息的清除onfocus 이벤트는 개체에 초점이 맞춰지면 발생합니다. Onfocus는 일반적으로 ,
팁: onfocus 이벤트의 반대 이벤트는 onblur 이벤트입니다.
확장 정보:
onblur 이벤트는 개체가 초점을 잃을 때 발생합니다. Onblur는 일반적으로 양식 입력 상자에 사용되는 Javascript 유효성 검사 코드에 자주 사용됩니다.
Syntax
HTML:
<element onblur="SomeJavaScriptCode">
JavaScript:
object.onblur=function(){SomeJavaScriptCode};[권장 학습: javascript 고급 튜토리얼]
위 내용은 자바스크립트 입력 시 텍스트 상자 색상이 변경되도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
