firefox 변경 텍스트 영역의 높이가 작동하지 않습니다.

사용자가 스크롤 할 필요가 없도록 입력 할 때 텍스트 영역의 높이를 변경하려고했습니다. IE 및 Chrome에서 관리 할 수 있지만 Firefox에서 작동하지는 못합니다. 제 코드를 살펴보십시오. 나는 이것에 정말로 새로운 것이다. 그것은 이벤트를 인식하지 못하는 것 같아 주위에 방법을 알아낼 수 없었다.firefox 변경 텍스트 영역의 높이가 작동하지 않습니다.

<form id="blog-comment-form" method="post" action="index.php"> 
<textarea id="comment" name="b_com" onkeyup="showmsg()" placeholder="ADD YOUR COMMENT HERE"></textarea> 
<input type="submit" name="submit" value="POST COMMENT"/> 
</form>

내가 외부 파일에서 함수를 호출 오전 : 다음은 내 코드입니다. 그리고 내 자바 스크립트 코드 :

function showmsg() { 

    if(!event){ 
      event= window.event;} 
    if (event.keyCode==13) { 
     var a = document.getElementById("comment"); 
    var b = document.getElementById("comment").style.scrollHeight; 
    a.style.height = ((a.scrollHeight)+6) + "px"; 
}else { 
    var a = document.getElementById("comment"); 
    var b = document.getElementById("testthis").style.height; 
    a.style.height = ((a.scrollHeight)+6) + "px"; 
} 

}

당신에게

출처

2013-07-17 Justin

당신은을 사용하여 고려 되세요 이미 교차 브라우저 문제를 처리하는 라이브러리입니다. 함께? –

텍스트 입력란의 크기가 사용자 입력에 따라 동적으로 조정되는 것이 중요합니까? 어쩌면 사용자가 텍스트 영역의 크기를 조정할 수있는 대안이 있을까요? 'resize : vertical;' – Dolchio

: 최종 코드의 모습

<body onload="init()">

: 당신이 요소 본체에 연결할 수 있습니다 init을

function showmsg(event) { 
    if (event.keyCode==13) { 
     var a = document.getElementById("comment"); 
     a.rows++; 
    } 
}

가 호출하려면 : 당신이 행을 사용할 수 있습니다 텍스트 영역의 크기를 조정하려면 쓰기 :

function showmsg(event) {

대신

function showmsg() {

및

쓰기이 (HTML 마크 업) 대신에

onkeyup="showmsg(event)"

onkeyup="showmsg()"

출처

2013-07-17 22:00:28

이제는 잘 작동합니다. 나는 지금 마이클 잭슨처럼 춤을 추고있다. 남자 고마워. – Justin

감사 당신은 행을 추가 할 필요는 영역을 텍스트 속성.

document.getElementById('comment').addEventListener('keyup', showmsg);

A : 그것은 또한 당신을위한 이벤트 객체를 만들 것이다, 당신은 다른 방법으로 KeyUp 이벤트를들을 수 속성 onKeyUp에를 사용하면 텍스트 영역의 높이를 증가

출처

2013-07-17 21:40:26

어떻게 모든 브라우저에서 제대로 작동 할 수 있습니까? – Justin

행은 단지 구현 된 표준 행 높이를 기반으로하는 텍스트 영역의 높이 (행 단위)를 지정합니다 ... 모든 주요 브라우저에서 textarea의 html 속성으로 지원되지만 OP가 다음을 고려하지 않습니다. 픽셀 높이 (질문에있는 코드를 기반으로 설정)로 설정하려고합니다. –

대신에 도움이 될 것입니다 작업 예제 : http://jsfiddle.net/rotev/FKDVD/1/

Firefox 및 Chrome에서 테스트되었습니다.

출처

2013-07-17 21:54:10

아래쪽 투표를 설명해 주시겠습니까? –

방금 시도했지만 작동하지 못했습니다. – Justin

작동 예제를 사용해 보셨습니까? Firefox와 Chrome에서 작동합니다. –

코드에 몇 가지 문제가 있습니다. 일부 브라우저에서는 이벤트 처리가 올바르게 작동하지 않을 수 있습니다.

먼저 이벤트를 콜백 자체에서 가져오고 event라는 전역 변수를 사용하지 않아야합니다.

텍스트 영역의 크기를 조정하려면 cols 및 rows 속성을 사용할 수 있습니다.

당신은 다음과 같은 방법으로 콜백을 첨부 할 수 있습니다, 이벤트를 처리하려면

function init(){ 
    var e = document.getElementById("comment"); 
    e.onkeyup = showmsg; 
}

이벤트 리스너에 대한 자세한 내용은 this out을 확인합니다.

<html> 
<head> 
<script> 
function init(){ 
    var e = document.getElementById("comment"); 
    e.onkeyup = showmsg; 
} 
function showmsg(event) { 
    if (event.keyCode==13) { 
     var a = document.getElementById("comment"); 
     a.rows++; 
    } 
} 
</script> 
</head> 
<body onload="init()"> 
<form id="blog-comment-form" method="post" action="index.php"> 
<textarea id="comment" name="b_com" placeholder="ADD YOUR COMMENT HERE"></textarea> 
<input type="submit" name="submit" value="POST COMMENT"/> 
</form> 
</body> 
</html>

출처

2013-07-17 21:55:59 wendelbsilva

firefox 변경 텍스트 영역의 높이가 작동하지 않습니다.

답변

관련 문제