Question

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

我有以下代码。

* {
  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>

Answer 1

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

* {
  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>

Answer 2

使用textarea的越野车。使用input：text也可以，但不允许多行。

var count=0;
    function a()
    {
    var e=document.getElementById('t');
e.contentEditable=true;
    count++;
    if(count>=23 && count%23==0)
    {
    e.style.height=e.value.length*1.2+'px';
    }
    }

<textarea type="text" id="t" onkeydown='a()' style="overflow:hidden"></textarea>

像Whatsapp一样，如何在输入时进行向上扩展的输入？

2 个答案: