小程序/网页实现textarea高度随内容自动改变

时间: 2018-07-10阅读: 4518标签: 表单

需求

textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。

发现了一个比较好用的插件flexText,但是这个基于jquery写的,目前的技术栈是react,所以简单看了下,然后用原生的js模拟了一个实现。


原理:

html结构:
  1. <div class="body">
  2. <div class="container">
  3. <pre class="pre"><span /><br /><br /></pre>
  4. <textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
  5. </div>
  6. </div>
样式:

最外层的div不需要样式,重点在里面的pre和textarea

textarea绝对定位,高度为100%,也就是高度随着外面container的高度变化。

pre是块元素,占用空间但是不可见。在textarea输入的时候,实时的把内容写入到pre中,因为pre是container的子元素,且所以外层container的高度会被pre的高度撑开。

  1. .container{
  2. position: relative;
  3. }
  4. .content{
  5. position:absolute;
  6. top:0;
  7. left:0;
  8. height:100%;
  9. background: transparent;
  10. outline:0;
  11. resize:none;
  12. overflow:hidden;
  13. }
  14. .container pre {
  15. display:block;
  16. visibility:hidden;
  17. }
js实时把textarea内容写入到pre:
  1. function changeContent(){
  2. var $textarea = document.getElementsByClassName('content');
  3. var $pre = document.getElementsByClassName('pre');
  4. $pre[0].innerhtml = $textarea[0].value;
  5. }


简陋的源码

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <style>
  7. .container{
  8. position: relative;
  9. }
  10. .content{
  11. position:absolute;
  12. top:0;
  13. left:0;
  14. height:100%;
  15. background: transparent;
  16. outline:0;
  17. font-size: inherit;
  18. color: inherit;
  19. line-height: inherit;
  20. text-indent: inherit;
  21. letter-spacing: inherit;
  22. resize:none;
  23. overflow:hidden;
  24. }
  25. .container pre {
  26. display:block;
  27. visibility:hidden;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="body">
  33. <div class="container">
  34. <pre class="pre"><span /><br /><br /></pre>
  35. <textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
  36. </div>
  37. </div>
  38. <script>
  39. function changeContent(){
  40. var $textarea = document.getElementsByClassName('content');
  41. var $pre = document.getElementsByClassName('pre');
  42. $pre[0].innerHTML = $textarea[0].value;
  43. }
  44. </script>
  45. </body>
  46. </html>


使用oninput而不是onchange的原因:

onkeyup使用复制粘贴时,高度不能自动改变

onchange事件:在内容改变(两次内容有可能相等)且失去焦点时触发,不能实时同步

oninput事件:HTML5 的标准事件,可以用来检测元素通过用户界面发生的内容变化,在内容修改后立即被触发


小程序中的实现

wxml:

<view class="text-box">
      <text>{{currentInput}}</text>
      <textarea class="weui-textarea" placeholder="请输入文本" bindinput="getInput" maxlength="1000"/>
</view>


wxss:

.text-box{
    width:100%; 
    position: relative;
    min-height:80rpx;
   margin-top:17rpx;
}
.text-box text{
   display:block;
   visibility:hidden;
   word-break:break-all;
   word-wrap:break-word;
}
.text-box .weui-textarea{
    height:100%;
    position: absolute;
    left:0;
    top:0; 
    overflow-y:hidden;
    word-break:break-all;
    word-wrap:break-word;
}


js:

Page({
  data: {
    currentInput:''
  },
  getInput:function(e){
    this.setData({
      currentInput: e.detail.value
    })
  }
})


提醒:默认textarea应该是200个字,如果想要增加字数限制,使用maxlength属性

扩展:如果想给textarea输入的文字加删除线,只需把text的visibility:hidden; 属性去掉,给textarea加一个透明的颜色就可以了。透明颜色:color:rgba(52, 52, 52,0.5);

链接:https://blog.csdn.net/liuwengai/article/details/78987957


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/918

form表单input回车提交问题

文本框输入完成后点击回车页面刷新,问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件。

PHP如何解决表单重复提交

表单隐藏域中存放session(表单被请求时生成的标记)。采用此方法在接收表单数据后,检查此标志值是否存在,先进行删除,然后处理数据; 若不存在,说明已提交过,忽略本次提交。加载提交的页面时候

javascript实现form表单onsubmit提交前验证

可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验。onsubmit指定的方法返回true,则提交数据;返回false不提交数据。

JS使用textarea模拟post提交表单

textarea代表HTML表单多行输入域,textarea标签是成对出现的,以<textarea>开始,以</textarea>结束。cols -- 多行输入域的列数,rows -- 多行输入域的行数

AntDesign表单的理解与使用

虽然 react 没有内置的表单验证逻辑,但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。具体地, AntDesign 中的表单组件 Form 与表单域 Form.Item(用于包裹任意输入控制的容器)配合使用:

javascript中如何判断checkbox是否选中?

javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。对于在js中来判断checkbox是否被选中很简单,示例如下:

HTML常用标签之<form>标签

在HTML中,<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。每个表单元素开始于form元素,可以包含所有的表单控件

layui在form表单不回调的问题

在使用layui进行ajax表单提交时,不回调,并且刷新了当前页面。在表单提交后添加 代码 return false;form.on()表单监控事件中一定要加 return false;

在HTML中限制input 输入框只能输入纯数字

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母,使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应,使用 oninput 事件,完美的解决了以上两种问题

Js使用表单元素验证表单

最简单的HTML结构:网站最基础的就是注册,它是一个系统的交互基础;因为用户最后要去点击\\\"注册\\\"按钮,所以我们就在\\\"注册\\\"按钮上添加一个onclick事件属性,引用eg.regCheck()

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!