Textarea 자동 확대가 Chrome에서 작동하지 않습니다.

내가 시도하는 것은 텍스트를 입력하거나 텍스트를 붙여 넣을 때 Textarea 자동 확대를 만드는 것입니다. 그것은 IE7, IE8과 IE9, Firefox에서 잘 작동합니다. 그러나 OPERA, CHROME 및 SAFARI에서 Shift 키, Ctrl, 아래쪽 화살표, 위쪽 화살표, 왼쪽 화살표, 오른쪽 화살표, 홈, 끝, 삭제 등의 기능 키/추가 키를 클릭해도 자동으로 커집니다.Textarea 자동 확대가 Chrome에서 작동하지 않습니다.

jQuery 코드 :

<script type="text/javascript"> 
function txtareaAutoGrow(txtar, clkBtn){ 
    // txtareaAutoGrow() start here 
$("#"+txtar).height(18); 

    $("#"+txtar).keyup(function(){ 
     if ($("#"+txtar).height() <= 18){ 
      $(this).height(18); 
      } 
     else { 
      $(this).height($("#"+txtar).prop("scrollHeight")); 
      $("#"+txtar).bind('paste', function() { 
       setTimeout(function() { 
       $("#"+txtar).height($("#"+txtar).prop("scrollHeight")); 
      }, 100);    
    }); 
      } 
     }); 


    $("#"+clkBtn).click(function(){ 
     if ($("#"+txtar).height() <= 18){ 
       $("#"+txtar).height($("#"+txtar).prop("scrollHeight")); 
      } 
      else { 
        $("#"+txtar).height(18); 
       } 
     }); 
    // txtareaAutoGrow() end here 
}; 
</script>

HTML 코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Auto Resize TEXTAREA</title> 
<style type="text/css"> 
textarea { 
     overflow:hidden; 
     resize: none;} 
</style> 

<script type="text/javascript" src="jquery-latest.js"></script> 
<script type="text/javascript" src="autoresizeTextarea.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    txtareaAutoGrow("txtar1", "btnXpand1"); 
    txtareaAutoGrow("txtar2", "btnXpand2"); 
}); 
</script> 
</head> 

<body> 
<p> 
    <textarea cols="100" id="txtar1"></textarea> 
    <input type="button" id="btnXpand1" value="Expand/Collapse" /> 
    <p>&nbsp;</p> 
    <textarea cols="100" id="txtar2"></textarea> 
    <input type="button" id="btnXpand2" value="Expand/Collapse" /> 
</p> 
<p> 
    <!--<input type="button" id="Heght" value="Height" /> 
    <input type="button" id="scrlHeight" value="Scroll Height" /> 
    <input type="button" id="btnXpand" value="Expand/Collapse" />--> 
</p> 
</body> 
</html>

출처

2012-08-24 Raju Sarvasiddi

는 일부 브라우저에서 작동 왜,하지만 지금까지 내가 당신이 설정하는 말할 수 없음 확인 높이를 18로 설정하면 18 이하인지 확인하고, 설정하면 18로 설정합니다. 높이가 설정되고 눈에 띄는 오버플로가 없으므로 키의 높이가 18, 그래서 그것은 작동하지 않습니다.

18보다 작은 지 확인하면 나에게 잘 작동하는 것 같습니다. 또한, 당신이 모든 곳에서 계속 사용이 선택을 캐시 아마 나쁜 생각이 아니다 :

function txtareaAutoGrow(txtar, clkBtn) { 
    var txtA = $("#" + txtar); 

    txtA.height(18).keyup(function() { 
     if (txtA.height() < 18) { 
      $(this).height(18); 
     } 
     else { 
      $(this).height(txtA.prop("scrollHeight")); 
      txtA.bind('paste', function() { 
       setTimeout(function() { 
        txtA.height(txtA.prop("scrollHeight")); 
       }, 100); 
      }); 
     } 
    }); 

    $("#" + clkBtn).click(function() { 
     if (txtA.height() < 18) { 
      txtA.height(txtA.prop("scrollHeight")); 
     } 
     else { 
      txtA.height(18); 
     } 
    }); 
}; 

$(document).ready(function() { 
    txtareaAutoGrow("txtar1", "btnXpand1"); 
    txtareaAutoGrow("txtar2", "btnXpand2"); 
});

FIDDLE

출처

2012-08-24 10:56:08 adeneo

미안 해요, 난 분명히 이전을 설명 일부러. 다시 한번 확인해주세요. –

나는 정말로 그것을 얻지 못합니까? 화살표 키를 누를 때 텍스트 영역의 높이가 증가한다는 것을 말하고 있습니까? 그리고 위의 게시 된 피들에서도이 작업을 수행합니까? – adeneo

코드가있는 HTML 페이지를 만들고 Chrome으로 엽니 다. 이제 텍스트를 추가해보십시오. Textarea는 모든 키 업에 대해 증가하고 있습니다. –

Textarea 자동 확대가 Chrome에서 작동하지 않습니다.

답변

관련 문제