포커스 지우기 및 포커스 프롬프트 손실을 달성하기 위해 텍스트 영역 포커스 사용 effect_javascript 기술

렌더링:

구체 구현:

1. 텍스트 영역 태그 콘텐츠

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

2. 추가 버튼 클릭 시 최대 50자까지 입력 가능합니다.

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

$("#introduction").val("최대 50자까지 입력 가능합니다. 문자");

document.getElementById("introduction").style.color="gray";

3.js 스크립트

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

function getAddFocus (id){//추가 작업 소개 및 설명의 경우 textarea가 포커스를 받고 입력 상자를 지웁니다.

var textarea=document.getElementById(id)
textarea.value=""
textarea .style.color="black";
}

function LostAddFocus(id){//추가 작업의 소개 및 설명의 경우 텍스트 영역이 포커스를 잃고 내용이 비어 있는 경우 프롬프트 메시지가 표시됩니다.
var textarea=document.getElementById(id);
var textarea_value=textarea.value;
if(textarea_value==""){
textarea.value="입력 가능 50자";
textarea.style.color="gray" ;
}
}

csdn에서 작성한 텍스트 영역 포커스 사용 참조 파트너:

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

1. 텍스트 상자에 다음과 같은 기본 텍스트가 표시됩니다.

White Pigeon Boy > 하얀 비둘기 소년
　2. 텍스트 상자에 마우스를 클릭하면 기본 텍스트가 사라집니다.

하얀 비둘기 소년
흰색 Pigeon Boy< /textarea> <br>　3. 텍스트 상자로 마우스를 이동하면 기본 텍스트가 사라집니다. <br><br><textarea onmouseover="focus()" onfocus="if(value=='White 비둘기 소년') {value =' '}">흰 비둘기 소년
<br>　4. 텍스트 상자를 마우스로 클릭하면 기본 텍스트가 사라집니다. 텍스트 상자 밖의 아무 영역이나 클릭하면 기본 텍스트가 다시 나타납니다. <br> <br><textarea onfocus=”if( value=='흰 비둘기 소년') {value=' '}" onblur="if(value==' ') {value='흰 비둘기 소년'}"> 흰 비둘기 소년 <br> <textarea onfocus=”if(value=='흰 비둘기 소년') {value=' '}" onblur="if(value==' ') {value='흰색 Pigeon Boy'}">White Pigeon Boy
　5. 마우스를 텍스트 상자로 이동하면 기본 텍스트가 사라지고, 텍스트 상자 밖으로 마우스를 이동하면 기본 텍스트가 다시 나타납니다.

흰 비둘기 소년
흰 비둘기 소년
　6. 텍스트 상자에 마우스를 올리면 텍스트 상자의 모든 텍스트가 사라집니다(기본 텍스트 및 나중에 입력한 텍스트 포함):

White Pigeon Boy</ textarea> <br><textarea onclick=”value=' '">백비둘기소년
　7. 텍스트 상자에 마우스를 가져가면 텍스트 상자 안의 모든 텍스트가 사라집니다. 기본 텍스트 및 나중에 입력된 텍스트):

White Pigeon Boy
흰 비둘기 소년 <br>　8. 텍스트 상자를 클릭하고 모든 텍스트 상자를 선택합니다. 내부 텍스트: <br><br><textarea onfocus=”select()”>흰 비둘기 소년 <br><textarea onfocus=”select()”>White Pigeon Boy< /textarea> <br> 9. 마우스를 텍스트 상자로 이동하여 텍스트 상자의 모든 텍스트를 선택합니다. <br><br>< ;textarea onmouseover=”focus()” onfocus=”select()”>흰 비둘기 소년< ;/textarea> <br><textarea onmouseover=”focus()” onfocus=”select()”>흰 비둘기 소년< ;/textarea> <br>　10. Enter를 누르면 포커스가 현재 텍스트 상자에서 다음 A 텍스트 상자로 이동합니다: <br><br><textarea onkeydown=”if(event.keyCode==13)event .keyCode=9″>흰 비둘기 소년
흰 비둘기 소년 11. Enter를 누르면 포커스가 현재 텍스트 상자에서 지정된 위치로 이동합니다.

< ;textarea onkeypress="return focusNext(this,'지정된 위치의 ID 이름',event)"> 하얀 비둘기 소년