只读文本区域的scrollHeight

Question

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

由于电子邮件字段的字符数限制为254，我正在尝试尽可能简单地做到这一点。

我的jQuery正在开发中，但这是我写的：

"

...和HTML

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

...和CSS

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

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"/>