HTML5 textarea高宽比自融入的两种计划方案

日期:2020-10-09 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

阅读文章全文你将得到下列处理计划方案。

  • 点一下长文字编写textarea,全自动得到聚焦点
  • 伴随着键入值全自动伸缩高宽比
  • 可拷贝加上信息内容
  • 可粘贴文字
  • 可粘贴照片

下列案例编码实行自然环境为Chrome80

计划方案1

HTML5 Textarea 元素

1. 全自动得到聚焦点

点一下编写全自动得到聚焦点后光标自动跳转到了最前面,why?

查文本文档 MDN,textarea元素存在selectionEndselectionStart的特性用来表明选定的文字刚开始部位和完毕部位,DOM插口案例是 HTMLTextAreaElement, 它具备 setSelectionRange 方式,用来选定键入框中的文字,用法:TextAreaElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

那末大家要是保证selectionStart === selectionEnd === value.length , 这样光标就选定到最结尾。

edit.addEventListener("click", function() {
  txt.classList.add("hidden");
  document.body.insertBefore(textarea, edit);
  textarea.innerHTML = "这是必须编写的信息内容";
  textarea.focus();
  // textarea.selectionEnd = textarea.innerHTML.length;

  textarea.setSelectionRange(
    textarea.innerHTML.length,
    textarea.innerHTML.length
  );
});

2. 自融入高宽比

当不设定高宽比时换行会出現翻转条,因此要是让textarea翻转条消退,让其height = scrollHieght, 那末怎样监视textarea的转变,则必须input恶性事件,让textarea高宽比动态性等于它的scrollHeight便可,编码以下:

textarea.addEventListener("input", function() {
    this.style.height = `${this.scrollHeight}px`;
});

为何每次键入都会使得高宽比提升(每次提升4px),历经检测Safari一样也是这个实际效果,Firefox合乎预期高宽比不出现异常提升,查询Chrome操纵台发现textarea内嵌了许多款式,尝试将去掉padding后,能够一切正常伴随着內容提升高宽比自融入了。

<style>
textarea {
  padding: 0;
}
</style>
<textarea></textarea>
<script>
const textarea = document.createElement("textarea");
textarea.addEventListener("input", function(e) {
  this.style.height = `${this.scrollHeight}px`;
});
</script>

为何去掉padding值,键入后高宽比就不提升了?(未寻找有效的解释,欢迎留言探讨解答)

可是删掉文字的状况下height仍未能全自动放缩,剖析缘故, 当删掉文字换行的情况下scrollHeight的尺寸仍未产生更改,scrollHeight做为写保护特性( MDN-文本文档),怎样让scrollHeight高宽比再次测算哪?仅有更改高宽比,因而:

textarea.addEventListener("input", function(e) {
  this.style.height = "inherit";
  this.style.height = `${this.scrollHeight}px`;
});

到此高宽比自融入键入內容进行,可是每次换行的闪烁很难受,transition走1波,

textarea {
  overflow: hidden;  // 避免换行出現翻转条闪烁
  padding: 5px 10px;
  box-sizing: border-box;
  transition: all 0.2s linear;
}

結果transition并没实际效果,缘故height原始值或参照值务必为标值过渡动漫才会起效,height设定为autoinherit动漫不容易起效, 因此折衷的方法便是当删掉的情况下再次重设高宽比,键入时不必须重设,这样键入时动漫起效, 删掉沒有动漫, 临时想不到更好的方法。

textarea.addEventListener("keyup", function(e) {
  if (e.keyCode === 8) {
    this.style.height = "inherit";
    this.style.height = `${this.scrollHeight}px`;
  } else {
    this.style.height = `${this.scrollHeight}px`;
  }
});

3. 适用粘贴文字,照片等

textarea只能键入文字,没法完成粘贴照片。

textarea.addEventListener(
  "paste",
  function(e) {
    e.preventDefault();
    console.log(
      "paste",
      e.clipboardData.items,
      e.clipboardData.types,
      e.clipboardData.getData("text/html"),
      e.clipboardData.getData("text/plain"),
      e.clipboardData.getData("text/Files")
    );
  },
  false
);

计划方案2

div contenteditable 更换textarea

1. 全自动得到聚焦点

编写div contenteditabletrue,随后运用RangeSelection 光标挪动到最终的实际效果。

edit.addEventListener("click", () => {
  textarea.setAttribute("contenteditable", true);
  textarea.focus();
  const range = document.createRange();

  // range 包括的內容
  range.selectNodeContents(textarea);

  // range.setStart(textarea.firstChild, 0);
  // range.setStart(textarea.lastChild, textarea.innerHTML.length);

  // 起止部位是不是同样
  range.collapse(false);
  const sel = window.getSelection();
  
  // 将全部的地区都从选区中移除。
  sel.removeAllRanges();
  
  // 1个地区(Range)目标将被添加选区。
  sel.addRange(range);
});

2. 自融入高宽比

div contenteditable 纯天然适用依据键入来自融入高宽比。

3. 粘贴照片, 文字等

textarea.addEventListener("paste", function(e) {
  e.preventDefault();
  const clipboardData = e.clipboardData || e.originalEvent.clipboardData;
  // 获得纯文字
  let text = clipboardData.getData("text/plain");
  let file = clipboardData.getData("text/plain");
  // console.log(clipboardData.items, clipboardData.getData("text/Files"));

  // 插进img,能够做1些提交照片的1些实际操作
  insertImg(clipboardData);

  // 只键入纯文字
  document.execCommand("insertText", false, text);
});

此方式能够限制只能提交文字或照片。

欢迎留言探讨别的textarea高宽比自融入的计划方案。

到此这篇有关HTML5  textarea高宽比自融入的两种计划方案的文章内容就详细介绍到这了,更多有关textarea高宽比自融入內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!