我们可以在运行时更改文本区域的大小

时间:2013-10-28 07:02:34

标签: jquery html css cordova

我正在开展一个phonegap项目。在这里,我想滚动文本区域,所以尝试使用overflow:auto; 但它不适用于设备android。现在我想更改文本区域的高度,当用户写入文本超过区域高度时,或者只是当用户输入4或5行而不是文本区域的高度根据用户要求更改时我修改了高度文本区域上方的div,当文本区域的高度大于div的高度时,div是滚动。

以下是链接:http://jsfiddle.net/amnishyadav/NUhBf/

<div class="mydiv">
    <textarea class="textdiv">
    </textarea>
</div>

3 个答案:

答案 0 :(得分:0)

使用javascript

document.getElementById("myTextarea").rows=10;

答案 1 :(得分:0)

当您从height移除mydiv属性并添加jQuery mobile时,jQuery mobile将负责调整textarea的大小,请参阅JSFiddle

更新

您可以从jQuery mobile中提取代码,该代码负责增长textarea。当您查看jQuery mobile 1.3.2并搜索textarea时,您会看到

// Autogrow
if ( input.is( "textarea" ) ) {
    ...
}

当您根据自己的情况调整此代码时,您将获得类似JSFiddle

的内容

更新2:

没有必要下载到jQuery移动源。搜索Stackoverflow(并找到当然)给出了这个奇妙的答案Textarea to resize based on content length。当您调整jQuery移动解决方案时,您将获得

function textareaChanged(input) {
    input.style.height = "1px";
    input.style.height = (extraLineHeight+input.scrollHeight)+"px";
};

$('.textdiv').on("keyup change input paste", function () {
    ...
    var input = this;
    ...
});

请参见修改后的JSFiddle

答案 2 :(得分:0)

<div class="mydiv">
    <textarea id='textarea1' class="textdiv">
    </textarea>
</div>

<script>
    document.getElementById("textarea1").style.width="500px";
    document.getElementById("textarea1").style.height="500px";
</script>

你可以这样做