Textarea에 연결

Question

나는 사용자를 textarea에 데려다주고 즉시 입력을 시작할 수있는 링크를 만들고 싶습니다. 이건 내 텍스트 영역입니다 :

<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> 

현재, 난 그냥하여 사용하고 있습니다 :

<a href="#commentnow">Post a comment</a> 

그러나 이것은 그들 만이 시작할 수 있도록 텍스트 영역 안에 아닌 어느 지역에 걸립니다 유형. 그렇게하기 위해서는 분명히 그것을 클릭해야합니다. 현재 설정으로 fiddle을 만들었습니다.

나는 다양한 해결책이 있다고 상상한다. 그러나 호환성을 중시하는 솔루션을 요청할 것입니다 (모든 브라우저 및 특히 전화 브라우저에서 작동).

Answer 1

window.location.hash과 함께 .focus() 방법을 사용하십시오. 이것에 대한

<a href="#comment" onclick="window.location.hash = 'comment'; document.getElementById('comment').focus(); return false;">click</a> 
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> 

사용 return false 또는 preventDefault()는 모든 곳에서 작동합니다. android의 Chrome/stock 브라우저에는이 기능이 필요하지 않습니다. Firefox 모바일 않습니다.

다음은 테스트 할 수있는 fiddle입니다. 입력하는 동안 제출이 표시되는 또 다른 예가 fiddle입니다.

Answer 2

정상적인 HTML 요소를 사용할 수있을 때 JavaScript를 사용하지 않아도됩니다.

<label for="commentnow">Post a comment</label> 
<textarea id="commentnow" name="comment" cols="45" rows="8" aria-required="true"></textarea>​ 

JS Fiddle demo을 : 당신의 요구 사항을 정확하게 label 요소가 충족되기 때문에 그와 마음에 그냥 대신 a의하는 label 요소를 사용합니다.

label의 for 속성을 가진 당신이 초점을 맞추려 요소 및 동료의 id의 label 동일해야합니다. 어떻게 호환성에 대한 그리고 그것이 텍스트 (유혹 할 때 커서가 변경) 클릭 할 버튼 방법을 만들 수 있습니다 .. :

두 질문 : 응답에서

(아래, 의견) OP에서 언급하는 .? 호환성 문제를 해결하기 위해

는 label 요소는 HTML 4.01부터 주변에 있고 난하지만 (IE 7을 포함, 내가 IE 6을 사용하여 기억할 수없는 그것으로 작동하지 않는 브라우저 건너 적이 없다).

는 그냥 예를 들어, 버튼처럼 나타납니다 당신이 a 요소의 스타일을 것 같은 방법으로 (CSS를 사용, 버튼처럼 보이게하려면

label { 
    color: #666; 
    display: inline-block; 
    padding: 0.3em 0.5em; 
    border: 1px solid #aaa; 
    background-color: #eee; 
    margin: 0.5em; 
} 

label:hover, 
label:active, 
label:focus { 
    color: #f90; 
    box-shadow: 0 0 0.3em #f90; 
} 

JS Fiddle demo, 이것은 아니다 특히 아름다운 예이지만 스타일링 가능성이 모두 인 것으로 나타 났으며이 그 점에있어서 다른 요소와 다르지 않습니다.

Answer 3

간단한 사용하여이 jQuery를 시도 :

<a class="link" href="#">Post a comment</a> 
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea 

$(".link").click(function(){ 
    $("#comment").focus(); 
    return false; 
});