0

私がしようとしているのは、テキストを入力するかテキストを貼り付けると、Textarea が自動拡張されるようにすることです。IE7、IE8、IE9、Firefox で問題なく動作しています。ただし、OPERA、CHROME、および SAFARI では、Shift、Ctrl、下矢印、上矢印、左矢印、右矢印、Home、End、Delete などの機能キー/追加キーをクリックしても自動成長します。

Jクエリコード:

<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>
4

1 に答える 1

0

一部のブラウザで機能する理由はわかりませんが、高さを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");
});​

フィドル

于 2012-08-24T10:56:08.460 に答える