关于html中 textarea 的 selectionStart 和 selectionEnd

最新推荐文章于 2023-12-01 13:57:18 发布

龟霸也是高达

最新推荐文章于 2023-12-01 13:57:18 发布

阅读量6k

点赞数 9

分类专栏： JavaScript 基础文章标签： html javascript

本文链接：https://blog.csdn.net/MS6324_ZAKU/article/details/108877608

版权

JavaScript 同时被 2 个专栏收录

44 篇文章

订阅专栏

基础

28 篇文章

订阅专栏

关于关于html中 `<textarea>`的 `selectionStart`和 `selectionEnd`

关于selectionStart和 selectionEnd不怎么碰到,MDN上也全是英文,网上也没查到什么详细的博客,因此写篇文章记录一下,

如下图,在一个`<textarea>`输入框中

存在0123456789这10个字符,点击按钮会在控制台输入selectionStart和 selectionEnd的值
在这里插入图片描述

当光标没有选择文字时

在这里插入图片描述

selectionStart和 selectionEnd都是4
selectionStart和 selectionEnd的值由光标所在的位置决定
光标在第几个那么他的值就是多少.因为没有选中,所以selectionStart和 selectionEnd是相同的

当光标选择文字时

在这里插入图片描述

选中的光标在1的左边开始,3的右边结束
光标的位置分别是1 和 4
因此 selectionStart和 selectionEnd的值是1 和4

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    textarea {
    resize: none;
  }
  .sub {
      width:100px;
    height: 30px;
  }
  </style>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button class="sub">点击</button>
  <script>
    const $ = (s) => document.querySelector(s)

    let $textarea = $('textarea')

    $('.sub').onclick = function(){
    console.log($textarea.selectionStart)
    console.log($textarea.selectionEnd)

    }
  </script>
</body>