当键入超过最大宽度时,动态扩展文本区域的高度
Dynamically expand the height of a textarea when typing more then the max width
当键入超过文本区域元素的最大宽度时,如何水平增大文本区域?我也不想看到水平滚动条。
呈现的网页
<textarea name="CatchPhrase" class="input-validation-error" id="CatchPhrase" aria-invalid="true" aria-required="true" aria-describedby="CatchPhrase-error" rows="2" cols="20" data-val-required="The Catch Phrase field is required." data-val="true" data-val-maxlength-max="50"
data-val-maxlength="The field Catch Phrase must be a string or array type with a maximum length of '50'." htmlattributes="{ id = profileCatchPhrase, class = form-control }">I like yoga sd;lasdlk asdks';aksd'asd 'asd';las ';asd'lasd';las'dl as'dla'sdl'asld as'd;las'dl; a;sdlka;sdklasd ;alsd;lkasda ;alskd;lkasd ;lkasd;lk</textarea>
呈现 HTML 之前
<div class="form-group">
@Html.LabelFor(model => model.CatchPhrase, htmlAttributes: new { @class = "control-label col-lg-2 col-md-2 col-sm-2 col-xs-2" })
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
@Html.TextAreaFor(model => model.CatchPhrase, new { htmlAttributes = new { id = "profileCatchPhrase", @class = "form-control" } }) @Html.ValidationMessageFor(model => model.CatchPhrase, "", new { @class = "text-danger" })
</div>
</div>
尝试这样的事情:
$('#CatchPhrase').on('input', function() {
$(this).outerHeight(38).outerHeight(this.scrollHeight);
});
参见:https://stackoverflow.com/a/34513436/4613398
jsfiddle:https://jsfiddle.net/3qmztmjj/
如果我
正确理解了您的问题并且您想增加文本区域的水平宽度,您可以使用maxlength检查文本字符并使用步骤来增加宽度。希望这个片段对你有帮助。
$("#profileCatchPhrase").keypress(function() {
if ($(this).val().length > $(this).attr("data-val-maxlength-max")) {
var width = parseInt($(this).css("width").split("p")[0]) + 10;
$(this).css("width", width + "px");
$(this).attr("data-val-maxlength-max", parseInt($(this).attr("data-val-maxlength-max")) + 5);
}
});
在此,我使用了10px作为icreament步骤,您可以相应地调整它。
好吧,我假设您想水平扩展文本区域而不是垂直扩展文本区域,那么您可以尝试这样的事情:
<textarea type="text" value="" placeholder="Autosize"></textarea>
并编写一个简单的JavaScript函数,该函数将水平扩展:
$('textarea').keyup(function () {
// I'm assuming that 1 letter will expand the input by 10 pixels
var oneLetterWidth = 10;
// I'm also assuming that input will resize when at least eleven characters
// are typed
var minCharacters = 11;
var len = $(this).val().length;
if (len > minCharacters) {
// increase width
$(this).width(len * oneLetterWidth);
} else {
// restore minimal width;
$(this).width(150);
}
});
您还可以设置文本区域最大宽度,因为它应该在一段时间后停止扩展,因此只需将此 css 包含在 html 的 head 部分中:
textarea {
max-width: 400px;
}
使用jquery和textarea的id,如下所示
$(function() {
$('#CatchPhrase').autogrow();
});
相关文章:
- JavaScript:动态扩展原型是一种糟糕的做法
- 在Knockout中扩展动态和映射数据
- 当从Chrome扩展动态注入JS时,从onload()内部调用方法
- 如何动态添加或删除Chrome扩展、内容脚本、javascript文件
- firefox扩展/如何访问动态创建的元素
- 如何用document.createElement(“input”)方法使输入文本字段动态扩展
- chrome扩展在加载dom之前注入动态css
- typescript注释中的动态扩展类
- 从chrome扩展动态创建Google工作表
- AngularJS-谷歌Chrome扩展中的动态链接断开
- 创建一个 html 表,其中包含动态扩展的列数以适应屏幕大小
- 动态可扩展形式
- 动态调整 Chrome 扩展程序弹出窗口高度的大小
- 确定动态映像 src 的文件扩展名
- 扩展 Ext.data.Model(动态添加字段)
- 动态扩展动态加载的DIV的宽度
- Chrome扩展-动态右键单击菜单
- 如何在Typescript中扩展动态加载的类
- 使用不带Greasemonkey的Javascript,通过Firefox扩展动态更改网页内容
- Chrome扩展动态添加脚本