像Whatsapp一样，如何在输入时进行向上扩展的输入? [英] Like Whatsapp, how to make an input that extends to upwards as you type?

问题描述

就像在Whatsapp中一样，我想创建一个向上增长的写作领域.

Like in Whatsapp, I want to make a writing field that grows upwards.

我有以下代码.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #262626;
}

.tel {
  margin: 20px auto 0;
  width: 300px;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  position: relative;
}
.tel .screen {
  width: 280px;
  height: 400px;
  background: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
  left: 50%;
  position: absolute;
  top: 50px;
  transform: translate(-50%, 0);
}
.tel .screen .nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  background: #075E54;
}
.tel .screen #inp {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 225px;
  min-height: 37px;
  border-radius: 50px;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 2px 10px;
  resize: none;
}
.tel .screen #inp::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tel .screen .voice {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: #00897B;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tel .speaker {
  width: 50px;
  height: 4px;
  background: #a0a0a0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 25px;
  border-radius: 2px;
}
.tel .touch {
  height: 30px;
  width: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: conic-gradient(#b3b3b3 0%, #a0a0a0 50%, #b3b3b3 50%, #a0a0a0 100%);
  border-radius: 50%;
  bottom: 10px;
}

i {
  color: #fff;
  font-size: 14px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="tel">
  <div class="speaker"></div>
  <div class="screen">
    <div class="nav"></div>
     <textarea type="text" id="inp"></textarea>
    <div class="voice">
      <i class="material-icons">keyboard_voice</i>
    </div>
  </div>
  <div class="touch"></div>
</div>

推荐答案

我将使用一个contenteditable div，您只需将其放在底部，它的行为将与预期的一样

I would use a contenteditable div that you simply put at the bottom and it will behave like expected

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #262626;
}

.tel {
  margin: 20px auto 0;
  width: 300px;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  position: relative;
}
.tel .screen {
  width: 280px;
  height: 400px;
  background: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
  left: 50%;
  position: absolute;
  top: 50px;
  transform: translate(-50%, 0);
}
.tel .screen .nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  background: #075E54;
}
.tel .screen #inp {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 225px;
  min-height: 37px;
  border-radius: 50px;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 2px 10px;
}
.tel .screen .voice {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: #00897B;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tel .speaker {
  width: 50px;
  height: 4px;
  background: #a0a0a0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 25px;
  border-radius: 2px;
}
.tel .touch {
  height: 30px;
  width: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: conic-gradient(#b3b3b3 0%, #a0a0a0 50%, #b3b3b3 50%, #a0a0a0 100%);
  border-radius: 50%;
  bottom: 10px;
}

i {
  color: #fff;
  font-size: 14px;
}

div.edit {
  position: absolute;
    bottom: 4px;
    left: 5px;
    right: 50px;
    padding: 10px;
    min-height: 40px;
    background: #fff;
    border-radius: 15px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="tel">
  <div class="speaker"></div>
  <div class="screen">
    <div class="nav"></div>
    <div contenteditable="true" class="edit"></div>
    <div class="voice">
      <i class="material-icons">keyboard_voice</i>
    </div>
  </div>
  <div class="touch"></div>
</div>

这篇关于像Whatsapp一样，如何在输入时进行向上扩展的输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！