jquery - 只读文本区域的滚动高度

Question

我正在使用只读文本区域来显示已提交的电子邮件地址的表单结果页面。我正在尝试使 textarea 的高度增加以适合显示的电子邮件。到目前为止，我只能显示它被截断。

我正在尝试尽可能简单地执行此操作，因为电子邮件字段字符限制为 254。

我的 jQuery 正在进行中，但这是我写的：

$("textarea").each( function( i, el ) {
    $(el).height( el.scrollHeight );
});

...和 ​​HTML

<textarea class="created" id="email_address" name="email_address" value="" readonly=""></textarea>

...和CSS

textarea {
  border: none;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 0;
  margin: 0 auto;
  width: 90%;
  min-height: 28px;
  resize: none;
  height: 37.5px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  background: transparent;
 }

标签： jqueryhtml

Answer 1

我不知道您如何动态地将电子邮件地址附加到textarea...可能是 Ajax 请求成功或只是.append().

您显然在附加内容之前运行了高度调整功能。

您同意此Codepen非常接近您的问题。

下面的代码片段是一个解决方案。

swal({
  title: "Username Has Been Sent.",
  type: "success",
  html: "Didn't receive the email?<br>"+
  "<a href='#'>Resend Email</a><br>"+
  "<br>"+
  "Information Provided: <a href='#'>Edit</a><br>"+
  "<br>"+
  "<small>Email address:</small><br>"+
  "<textarea class='created' id='email_address' name='email_address' readonly></textarea>",
  showConfirmButton: false
})

// Make it a named function
function adjustTextareaHeight(){
  $("textarea").each( function( i, el ) {
    $(el).height( el.scrollHeight );
    console.log("Textarea height adjusted to content.");
  });
  
  // OR if there's only one textarea:
  // $("#email_address").height( this.scrollHeight );
}

// To simulate an Ajax request:
var email = "abcdefghijklmnopqrstuvwxyz1234567890@super-long-domain-name-impossible-to-remember-for-a-normal-human-being.com";
$("#email_address").append(email);

// In the callback of an Ajax request... Or right after the appending (like here):
adjustTextareaHeight();

textarea {
  border: none;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 0;
  margin: 0 auto;
  width: 90%;
  min-height: 28px;
  resize: none;
  height: 37.5px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  background: transparent;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.26.10/sweetalert2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.26.10/sweetalert2.css" rel="stylesheet"/>