Question

创建一个表单，允许textarea中的占位符在点击时向上移动试图让文本区域在每个换行符时增加1行，但是在我的javascript函数中，我不太确定要在if语句中包含什么来检查是否存在换行符：

＆＃13;

//function SetNewSize(textarea) {
//    if (textarea.value.length > 106) {
//        textarea.cols += 1;
//        textarea.rows += 1;
//    } else {
//        textarea.cols = 2;
//        textarea.rows = 2;
//    }
//}

function SetNewSize(textarea) {
  if (textarea.rows > 1) {
    textarea.rows += 1;
  } else {
    textarea.rows = 2;
  }
}

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 300px;
}

form {
  width: 600px;
  margin: 2em auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
}

form legend {
  font-size: 2em;
  margin-bottom: 1em;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.float-label .control {
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding-top: 23px;
  padding-bottom: 10px;
}

.float-label .control.small {
  width: 30%;
  border-right: 1px solid #ddd;
}

.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}

.float-label .control:last-child {
  border: 0;
}

.float-label input,
.float-label textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
}

.float-label input+label,
.float-label textarea+label {
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
}

.float-label input:valid+label,
.float-label textarea:valid+label {
  opacity: 1;
  top: 3px;
}

.float-label input:focus+label,
.float-label textarea:focus+label {
  color: #2c8efe;
}

＆＃13;

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
</head>

<body>
  <form class="float-label" spellcheck="false">
    <legend>Float Label Demo</legend>
    <!-- we need a wrapping element for positioning the label -->
    <!-- the required attribute is ... required! -->
    <div class="control" contenteditable>
      <textarea name="description" id="myTextArea" onKeyUp="SetNewSize(this);" placeholder="Description" required></textarea>
      <label for="title">Title</label>
    </div>
    <div class="control">
      <textarea name="description" placeholder="Description" required></textarea>
      <label for="price">Price</label>
    </div>
    <div class="control">
      <textarea name="description" placeholder="Description" required></textarea>
      <label for="description">Description</label>
    </div>
  </form>
</body>

</html>

＆＃13;

Answer 1

~~您只需使用split计算换行符，然后拆分\n ..~~

另外，要停止滚动条闪烁，只需将overflow-y: hidden放在textarea上就可以看到它变大了。

编辑：好的，另一个想法..不是改变行，只是改变元素的高度，我们可以从textarea.scrollHeight获得所需的高度..

例如..

＆＃13;

function SetNewSize(textarea) {
   textarea.style.height = "0px";
   textarea.style.height = textarea.scrollHeight + "px";
}

＆＃13;

*,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    body {
      width: 100%;
      min-height: 300px;
    }
    form {
      width: 600px;
      margin: 2em auto;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 300;
      font-size: 22px;
    }
    form legend {
      font-size: 2em;
      margin-bottom: 1em;
      width: 100%;
      border-bottom: 1px solid #ddd;
    }
    .float-label .control {
      float: left;
      position: relative;
      width: 100%;
      border-bottom: 1px solid #ddd;
      padding-top: 23px;
      padding-bottom: 10px;
    }
    .float-label .control.small {
      width: 30%;
      border-right: 1px solid #ddd;
    }
    .float-label .control.medium {
      width: 70%;
      padding-left: 10px;
    }
    .float-label .control:last-child {
      border: 0;
    }
    .float-label input,
    .float-label textarea {
      display: block;
      width: 100%;
      border: 0;
      outline: 0;
      resize: none;
    }
    .float-label input + label,
    .float-label textarea + label {
      position: absolute;
      top: 10px;
      transition: top 0.7s ease, opacity 0.7s ease;
      opacity: 0;
      font-size: 13px;
      font-weight: 600;
      color: #ccc;
    }
    .float-label input:valid + label,
    .float-label textarea:valid + label {
      opacity: 1;
      top: 3px;
    }
    .float-label input:focus + label,
    .float-label textarea:focus + label {
      color: #2c8efe;
    }
    
    
    textarea {
      overflow-y: hidden;
    }

＆＃13;

<!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form class="float-label" spellcheck="false">
      <legend>Float Label Demo</legend>
      <!-- we need a wrapping element for positioning the label -->
      <!-- the required attribute is ... required! -->
      <div class="control" contenteditable>
        <textarea name="description" id="myTextArea" onKeyUp="SetNewSize(this);"  placeholder="Description" required></textarea>
        <label for="title">Title</label>
      </div>
      <div class="control" >
        <textarea name="description" placeholder="Description"  required onKeyUp="SetNewSize(this);" ></textarea>
        <label for="price">Price</label>
      </div>
      <div class="control">
        <textarea name="description" placeholder="Description"  required onKeyUp="SetNewSize(this);" ></textarea>
        <label for="description">Description</label>
      </div>
    </form>
    </body>
    </html>

＆＃13;

如果textarea中有一个新行，则添加1行并增加textarea的大小

1 个答案: