Textarea高度自适应,addEventListener”input”, funcName;无效

2016/12 01 09:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于www.bwin2299.com的点点滴滴

参照的思路是segmentfault以条件过的题目

对前端不是很理解,根本完全按照下面的那个思路写的。但是在Chrome53下面运转还是会呈现scrollbar,不会自适应高度。讨教这是不是有可以是addEventListener无法接听input事变呢?

html代码

<div class="expandingArea ">
    <pre><span></span><br></pre>
    <textarea placeholder="输入笔墨"></textarea>
</div>

js代码

function makeExpandingAreacontainer {
    var area = container.querySelectortextarea;
    var span = container.querySelectorspan;
    area.addEventListenerinput, function {
        span.textContent = area.value;
    }, false;
    span.textContent = area.value;
}
var areas = document.querySelectorAlldiv;
var l = areas.length;
console.log"%d", l;
while l-- {
    makeExpandingAreaareas[l];
}

css代码 

.expandingArea{
    position:relative;
}

textarea{
    position:absolute;
    top:0;
    left:0;
    height:100%;
}


pre{
    display:block;
    visibility:hidden;
}

假如这个办法行不通的话能不克不及举荐一些可行的办法?主要用途是做一个博客的批评框,由于要提交form,以是又不克不及运用div的contenteditable=”true”属性。

input是什么事变,根本没听说过

应该是onkeydown事变吧

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.input {
    padding: 10px;
    width: 500px;
    min-height: 150px;
    border: 1px solid #ccc;
    resize: none;
    font-size: 20px;
    line-height:30px;
    overflow: hidden;
    word-wrap: break-word;
}
.hide {
    position: absolute;
    z-index: -100;
    visibility: hidden;
}
</style>
</head>
<body>
<pre class="input hide" id="pre"></pre>
<textarea class="input" id="textarea" placeholder="输入笔墨"></textarea>
<script>
var textarea = document.getElementByIdtextarea;
var pre = document.getElementByIdpre;
textarea.oninput = function {
    pre.textContent = textarea.value;
    textarea.style.height = pre.offsetHeight + px;
}
</script>
</body>
</html>

根本思路:使用别的一个html标签元素,设置成跟textarea一样的款式,当textarea输入笔墨内容时分,就将内容添补到该标签元素内,然后再将该元素的高度赋值给textarea;为什么要用pre标签,由于它不但要接纳textarea的笔墨内容,还要接纳款式,比如回车,只要pre标签可以以原款式输入,假如是别的html标签就需求额外写css了

(看完/读完)这篇文章有何感想! 来看看www.bwin2299.com是怎么评论的吧!

--转载请注明: bwin2299必赢亚洲_www.bwin2299.com_bwin2299必赢亚洲世界顶级公司 » Textarea高度自适应,addEventListener”input”, funcName;无效

发表评论

(必填)