jquery 插件实现多行文本框[textarea]自动高度

<div class="form-group">

    <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label>

    <div class="col-sm-9">

        <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea>

    </div>

</div>

jQuery.extend({

    textareaAutosize_dc: function() {

        $("textarea").on("keyup", function(e) {

            var currentEnterCount = $(this).val().split("\n").length;

            var lineHeight = Number($(this).css("line-height").replace("px", ""));

            var enterCount = $(this).attr("enterCount");

            if (currentEnterCount < enterCount && enterCount != undefined) {

                //每行减掉固定行高

                $(this).height($(this).height() - lineHeight);

            } else if (currentEnterCount > enterCount) {

                //每行加入固定行高

                $(this).height($(this).height() + lineHeight);

                $(this).attr("enterCount", currentEnterCount);

            }

            //记录当前行高

            $(this).attr("enterCount", currentEnterCount);

        });

    }

});

//调用自动高度

$.textareaAutosize_dc();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是微信小程序的代码实现: 主页面 wxml 文件: ``` <view class="container"> <textarea value="{{textValue}}" bindinput="onInput"></textarea> <button class="btn" bindtap="navigateTo">页面跳转</button> </view> ``` 主页面 js 文件: ``` Page({ data: { textValue: '' }, onInput: function (event) { this.setData({ textValue: event.detail.value }) }, navigateTo: function () { wx.navigateTo({ url: '/pages/second/second?textValue=' + this.data.textValue }) }, onLoad: function (options) { if (options.textValue) { this.setData({ textValue: options.textValue }) } else if (!this.data.textValue) { this.setData({ textValue: '默认字体' }) } } }) ``` 第二个页面 wxml 文件: ``` <view class="container"> <text>{{textValue}}</text> </view> ``` 第二个页面 js 文件: ``` Page({ data: { textValue: '' }, onLoad: function (options) { if (options.textValue) { this.setData({ textValue: options.textValue }) } else { this.setData({ textValue: '多行文本框为空' }) } } }) ``` 在主页面中,我们先绑定了一个多行文本框和一个按钮。当用户在多行文本框中输入时,我们通过 `bindinput` 事件来监听输入内容,并将输入的内容保存在 `textValue` 变量中。当用户点击页面跳转按钮时,我们使用 `wx.navigateTo` 来跳转到第二个页面,并将 `textValue` 的值传递过去。 在第二个页面中,我们通过 `onLoad` 事件来获取传递过来的值,并根据传递过来的值来设置 `textValue` 的值。如果页面跳转时没有传递 `textValue` 的值,则将 `textValue` 的值设置为“多行文本框为空”。 当用户在主页面中没有输入任何内容并且页面跳转也没有传递 `textValue` 的值时,我们将 `textValue` 的值设置为“默认字体”。 以上就是实现多行文本框显示不同内容的微信小程序的代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值