textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。
发现了一个比较好用的插件flexText,但是这个基于jquery写的,目前的技术栈是react,所以简单看了下,然后用原生的js模拟了一个实现。
最外层的div不需要样式,重点在里面的pre和textarea
textarea绝对定位,高度为100%,也就是高度随着外面container的高度变化。
pre是块元素,占用空间但是不可见。在textarea输入的时候,实时的把内容写入到pre中,因为pre是container的子元素,且所以外层container的高度会被pre的高度撑开。
- .container{
- position: relative;
- }
- .content{
- position:absolute;
- top:0;
- left:0;
- height:100%;
- background: transparent;
- outline:0;
- resize:none;
- overflow:hidden;
- }
- .container pre {
- display:block;
- visibility:hidden;
- }
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- .container{
- position: relative;
- }
- .content{
- position:absolute;
- top:0;
- left:0;
- height:100%;
- background: transparent;
- outline:0;
- font-size: inherit;
- color: inherit;
- line-height: inherit;
- text-indent: inherit;
- letter-spacing: inherit;
- resize:none;
- overflow:hidden;
- }
- .container pre {
- display:block;
- visibility:hidden;
- }
-
- </style>
- </head>
- <body>
- <div class="body">
- <div class="container">
- <pre class="pre"><span /><br /><br /></pre>
- <textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
- </div>
- </div>
- <script>
- function changeContent(){
- var $textarea = document.getElementsByClassName('content');
- var $pre = document.getElementsByClassName('pre');
- $pre[0].innerHTML = $textarea[0].value;
- }
- </script>
- </body>
- </html>
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
使用ajax可以实现无刷新提交表单,但有人表示ajax的效率不行,或者是其他缺点,例如客户端臃肿,太多客户段代码造成开发上的成本,如果网速慢,则会出现ajax请求缓慢,页面空白的情况,对客户的体验不好。ajax请求不利于搜索引擎优化
checkbox复选框可能是网站中常用的HTML元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果。::before和::after伪元素的用法
在 React 中,表单元素通过组件的 state 属性来自己维护 state,并根据用户输入调用setState()来进行数据更新,使 React 的 state 成为“唯一数据源”,被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。对于在js中来判断checkbox是否被选中很简单,示例如下:
为了帐号和密码安全,作为程序员,如何不让浏览器自动记住密码呢?浏览器有时总是自动填充用户和密码,怎么屏蔽呢? 方法一:在输入框上添加 onfocus=this.type=password 输入框获得焦点时改变输入框格式为密码框
在HTML中,<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。每个表单元素开始于form元素,可以包含所有的表单控件
表单是前端开发中最棘手的部分之一,您可能会在其中发现很多混乱的代码。基于组件的框架,如 Vue.js,在提高前端代码的可扩展性方面做了很多工作,但是表单的问题仍然存在。
input输入限制只能为数字的2种方法,通过onkeypress事件和onkeyup事件,输不上任何非数字字符。加上正则匹配不能输入非数字字符就可以了
这些情况都会导致表单重复提交,造成数据重复,增加服务器负载,严重甚至会造成服务器宕机。因此有效防止表单重复提交有一定的必要性。
当表单中存在input[password]的时候,采用submit方式提交。就会触发浏览器自动填充表单。比如chrome自动填充后,淡黄色输入框代替了背景样式,看起来有些怪异。input文本框是使用图片背景的
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!