>웹 프론트엔드 >JS 튜토리얼 >초점을 얻고 초점을 잃는 텍스트 상자에 대한 판단 코드_양식 특수 효과

초점을 얻고 초점을 잃는 텍스트 상자에 대한 판단 코드_양식 특수 효과

WBOY
WBOY원래의
2016-05-16 17:54:581686검색
텍스트 상자가 포커스를 잃음 이벤트 및 포커스를 얻음 이벤트

onBlur: 입력 포커스를 잃으면 이 이벤트가 발생합니다.
onFocus: 입력 포커스를 얻었을 때 파일이 생성됩니다. .
Onchange: 텍스트 값이 변경되면 이 이벤트가 발생합니다
Onselect: 텍스트가 강조 표시되면 파일이 생성됩니다.
onpropertychange 속성이 변경되면 이 이벤트가 발생합니다
붙여넣기와 관계없이 keyup onchange 등 가장 민감합니다

먼저 입력에 직접 작성된 자바스크립트를 살펴보겠습니다

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




jquery 구현 방법

요소 포커스 이벤트의 경우 jQuery의 포커스 함수인 focus(), Blur()를 사용할 수 있습니다.

focus(): 포커스를 얻을 때 사용되며 JavaScript의 onfocus와 동일합니다.
예:

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

$("p").focus( ); 또는 $("p").focus(fn)

blur(): 포커스가 손실되었을 때 사용되며 onblur와 동일합니다.
예:

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

$("p").blur( ); 또는 $("p").blur(fn)

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


< 레이블 = "searchKey" id="lbSearch">검색하시겠습니까? 여기서 레이블은 스타일



jquery 코드

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

$(function() {
$(' #searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur( function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch ').text('셴마를 검색하시겠습니까?');
});
})

좋습니다

다음은 간단한 예입니다.

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





제목 없는 문서
;
함수 tt(){
var i=document.form1.text1.value;

if(i.length>=6)
document.getElementById("s1"). innerHTML="사용자 이름은 6자를 초과할 수 없습니다.";
else
document.getElementById("s1").innerHTML=""
}
function a(){
var j =document.form1.text2.value;
if(j.length>=6)
document.getElementById("s2").innerHTML="비밀번호는 6자를 초과할 수 없습니다."
else
document.getElementById("s2").innerHTML="";
}




사용자 이름:


비밀번호:
< ; br />

/html>




첫 번째 유형: html5

html5는 이메일, 전화번호, 번호, 시간, 필수, 자동 초점, 자리 표시자 등과 같은 여러 가지 새로운 속성을 양식 텍스트 상자에 추가합니다. 속성은 양식 효과에 큰 변화를 가져옵니다.
자리 표시자는 그 중 하나로 초점을 맞추는 동시에 초점을 잃는 텍스트 상자를 완성할 수 있습니다. 입력 값이 비어 있고 자리 표시자의 내용이 페이지에 표시되는 것과 일치하는지 확인해야 합니다.
코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.




두 번째: jQuery

원칙: val 값을 만듭니다. 제목 값과 동일한 형식입니다.
코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.



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



텍스트 상자가 포커스를 잃습니다. JavaScript를 호출합니다
코드 복사 코드는 다음과 같습니다.

<% @ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %>



제목 없는 페이지

="form1" runat="server">



>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.