javascript - 使用 svg 制定自动调整大小的文本框

Question

我正在制作一个网站，快完成了，我只需要完成联系部分。我为输入做了一个很酷的小设计，它们在大多数情况下都运行良好。但是现在我正在制作一个文本区域，它应该是相似的，但不是。我正在使用 autosize 插件，只需快速谷歌搜索一下，您就会发现它是什么。它在调整文本框的大小方面做得很好，尽管它在定位方面非常奇怪。除此之外，我正在尝试调整围绕它的 svg 线条动画以及文本区域。我发布了代码笔 here .如您所见，动画在输入框上运行良好，但在文本框上根本不起作用。我可以自己让它在焦点上设置动画，但现在我担心的是调整大小总是勉强围绕文本区域。

这是一些代码:

<div class="svg-wrapper-input">
  <svg height="60" width="277" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape-input" height="60" width="277" />
    </svg>
    <input class="text" placeholder="E-Mail Address">
    </input>
</div>

<div class="svg-wrapper-input">
    <svg class="textarea" height="200" width="277" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape-input" height="200" width="277" />
    </svg>
    <textarea class="text message" placeholder="Message"></textarea>
</div>

---

body {
  background: #161616;
}

.shape-input {
    fill: transparent;
    stroke-dasharray: 279 394;
    stroke-dashoffset: 337;
    /*stroke-dasharray: 320;
    stroke-dashoffset: -474;*/
    stroke-width: 2px;
    stroke: #19f6e8;
    -webkit-animation: 0.8s draw-out-input ease forwards;
    -moz-animation: 0.8s draw-out-input ease forwards;
    -o-animation: 0.8s draw-out-input ease forwards;
    animation: 0.8s draw-out-input ease forwards;
}

.svg-wrapper-input {
    height: 60px;
    margin: 0 auto;
    padding: 5px 0;
    width: 277px;
    display: block;
    text-decoration: none;
}

input {
    outline: none;
    border: 0px;
    background: transparent;
    letter-spacing: 2px;
    padding-left: 25px;
    padding-right: 25px;
    width: 227px;
}

@keyframes draw-in-input {
    0% {
        stroke-dasharray: 279 394;
        stroke-dashoffset: -337;
    }
    100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-out-input {
    0% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 279 394;
        stroke-dashoffset: -336;
    }
}

.svg-wrapper:hover .shape {
    -webkit-animation: 0.5s draw-in ease forwards;
    -moz-animation: 0.5s draw-in ease forwards;
    -o-animation: 0.5s draw-in ease forwards;
    animation: 0.5s draw-in ease forwards;
}

.input-active {
    -webkit-animation: 0.8s draw-in-input ease forwards;
    -moz-animation: 0.8s draw-in-input ease forwards;
    -o-animation: 0.8s draw-in-input ease forwards;
    animation: 0.8s draw-in-input ease forwards;
}

.text {
    color: #fff;
    font-family: 'Montserrat';
    font-size: 16px;
    letter-spacing: 8px;
    line-height: 60px;
    position: relative;
    top: -64px;
    margin: 0;
}

textarea {
    border: 0;
    outline: none;
    background: transparent;
    padding-left: 25px;
    letter-spacing: 2px !important;
    padding-right: 25px;
    padding-top: 25px;
    width: 227px;
    top: -202px !important;
    resize: none;
    overflow: auto;
    line-height: 20px !important;
}

---

$(".svg-wrapper-input > input").focus(function () {
    $( this ).siblings("svg").children(".shape-input").toggleClass("input-active");
});

$(".svg-wrapper-input > input").focusout(function () {
    $( this ).siblings("svg").children(".shape-input").toggleClass("input-active");
});

autosize($('textarea'));
$('.message').keydown(function(){
    var msgHeight = $('.message').height();
    $('.textarea').attr( 'height', msgHeight );
    $('.textarea > .shape').attr( 'height', msgHeight );
});

编辑: 由于某些原因，autosize 在 codepen 演示中不起作用，如果您想查看它的实际效果，here's a link to the actual site .

另一个编辑: 我让 codepen 开始工作，我还更新了代码，让它看起来更好，但仍然不能正常工作。请帮忙。

Answer 1

这里有一些问题……好吧，不一定是错的，但不能协同工作。一种是textarea结合wrapper的定位。它使尺寸正确，但您迫使它偏离了位置。

使用代码检查器突出显示该元素并观察它的作用。您会看到尺寸似乎正确地改变了，但它的位置不对，这使得它看起来不对劲。解决办法是改变位置。

在 CSS 中一直向下滚动以查看更改。 http://codepen.io/mattkenefick/pen/LZWYQZ

/**
 * Modifications to make it fit
 */
.svg-wrapper-input {
  position: relative;
}

.svg-wrapper-input textarea {
  position: absolute;
  top: 0 !important;
}

使绝对环境围绕包装器旋转并强制文本区域到顶部。给这只猫剥皮的方法有很多，但这应该可以解决问题。