텍스트 영역이 흐리게 처리되지 않습니다.

Question

초점이 맞지 않아 텍스트 영역에 문제가 있습니다. 그 가정은 "textField"와 "textDefault"의 두 변수를 취하는 것입니다. textDefault는 페이지가로드 될 때 텍스트 영역에있는 내용을 보유합니다. 현재 내용을 원본 내용과 비교해야하기 때문에 변수에 추가했습니다.

textarea의 .html()을 사용하고 textDefault의 텍스트와 같으면 $ (this) .html ("")을 사용하여 내부 html을 제거합니다. 다음 흐림에 나는 반대를한다. textField가 ""와 같은지 확인하고, 텍스트 필드가 $ (this) .html (textDefault) 인 textarea에 textDefault의 값을 다시 넣을 것인지 확인합니다.

문제는 텍스트 영역을 클릭하고 끄는 것만으로 멋지게 작동하지만 텍스트 영역에 데이터를 입력 한 다음 모든 방법으로 백 스페이스를 지정하면 원래 데이터가 다시 텍스트 영역에 저장됩니다.

제안 사항? 코드 : Heres the 코드 :

추신 : 나는 거기에, 내가 텍스트 높이를 내용의 높이로 만들기 위해 초점을 자동으로 높이를 설정하는 것을 잊어 버렸다. 그냥 fyi 이것은 2 단어 만 입력하면 텍스트 영역이 100 피트가되지 않습니다.

var textField; 
var textDefault = "Click the title to add a title for this admin dashboard panel. Click  here to add a body. This body can contain html, or regular text.\n\nIt can be used for admin notes mainly, but to communicate with other admins as well.\n\nContact the developer of this website (max@haintmorgan.com) to have this widget actually contain php driven content."; 

$('.admin-note-body textarea').focus(function(){ 
    textField = $(this).html(); 

    if(textField == textDefault){ 
     $(this).html(""); 
     $(this).css('height', 'auto'); 
    } 
}).blur(function(){ 
    if($('.admin-note-body textarea').html() == ""){ 
     $('.admin-note-body textarea').html(textDefault); 
     $(this).css('height', '190px'); 
    } 
}); 

HTML : 시간을 절약 위해서

<textarea rows="" cols="">Click the title to add a title for this admin dashboard panel. Click here to add a body. This body can contain html, or regular text. 

It can be used for admin notes mainly, but to communicate with other admins as well. 

Contact the developer of this website (max@haintmorgan.com) to have this widget actually contain php driven content.</textarea> 

,

이 관리 대시 보드 패널의 제목을 추가 할 제목을 클릭합니다. 시체를 추가하려면 여기를 클릭하십시오. 이 본문에는 HTML 또는 일반 텍스트가 포함될 수 있습니다. \ n \ n 주로 관리 메모로 사용할 수 있지만 다른 관리자와도 통신 할 수 있습니다. \ n \ n이 웹 사이트 (max@haintmorgan.com)의 개발자에게 문의하여 위젯은 실제로 php 기반 콘텐츠를 포함합니다.

이것은 textDefault의 내용입니다. 그것은 \ n \ n없이 html에있는 세 줄의 동일한 내용 (\ n \ n을주의하십시오)을 수행합니다. 각 미니 단락을 구분하는 줄 바꿈이 있기 때문에 \ n 두 번 수행됩니다 ..

도움이 되셨습니까?

감사합니다, 데이비드

PSS : 190px 작품에 높이하지만 HTML 나던을합니다. 나는 textField와 .html() 및 textDefault가 모두 같은 값을 유지하는 모든 것에 console.log를 사용하는 것에 주목합니다.

Answer 1

사용 .val() 또한 .html()

당신은 $(this)를보다 효율적으로 사용하여 코드를 정리할 수 없습니다 :

:

$('.admin-note-body textarea').focus(function(){ 
    if($(this).val() == textDefault){ 
     $(this).val(""); 
     $(this).css('height', 'auto'); 
    } 
}).blur(function(){ 
    if($(this).val() == ""){ 
     $(this).val(""); 
     $(this).css('height', '190px'); 
    } 
}); 

또한 HTML5의 placeholder 속성이 자바 스크립트를 필요로하지 않고이 작업을 수행

http://dev.w3.org/html5/spec-author-view/common-input-element-attributes.html#the-placeholder-attribute

Answer 2

solutio n은 간단합니다 : .html() 대신 .val()을 사용하여 텍스트 영역의 내용에 액세스하십시오.