赤蓝紫

V1

2022/07/03阅读:13主题:姹紫

表单文本框的使用(一) 选择文本

表单文本框的使用(一) 选择文本

小技能

  1. 通过document.forms来获取所有的表单元素
  2. 通过form.elements来获取表单的所有表单元素
  3. 表单有用的属性tabIndex:数值,表示该表单字段在按Tab键时的切换顺序,默认顺序是从小到大
<form action="">
    <input type="text" tabindex="1">
    <input type="text" tabindex="3">
    <input type="text" tabindex="2">
</form>

文本框

文本框有两种:

  • input:单行文本框。size属性指定宽度,表示一次可显示的字符数(实际能显示多一点);maxlength属性指定最多字符数;value属性指定文本框的初始值。
  • textarea:多行文本框。rows指定文本框的高度;cols指定文本框的宽度,不支持size属性。初始值应在<textarea></textarea>之间,使用value指定无效。

inputtextarea都会在value属性保存自己的内容,可设置和读取文本框的值。在textarea中设置value属性无效

 <div class="input-box">
    <input type="text" value="clz" size="10" maxlength="10">
</div>
<div class="txa-box">
    <textarea type="textarea" rows="4" cols="8" maxlength="20">clz</textarea>
</div>

选择文本

select方法

文本框有一个select方法,可以选中文本框中全部内容,在调用该方法时会自动将焦点设置到文本框。

<body>
    <div class="input-box">
        <input type="text" value="clz" size="10" maxlength="10">
    </div>
    <div class="txa-box">
        <textarea value="123" rows="4" cols="8" maxlength="20">clz</textarea>
    </div>
    <button onclick="myclick()">选中多行文本框内容</button>

    <script>
        const txa = document.getElementsByTagName('textarea')[0]

        function myclick(e{
            txa.select()
        }
    
</script>
</body>

select事件

当选中文本框中的文本时,会触发select事件。select事件会在用户选择完文本后立即触发(IE老版本除外)。

<body>
    <div class="txa-box">
        <textarea value="123" rows="4" cols="8" maxlength="20">clz</textarea>
    </div>

    <script>
        const txa = document.getElementsByTagName('textarea')[0]

        txa.addEventListener('select', (e) => {
            console.error('选中内容了')
        })
    
</script>
</body>
select
select

取得选中文本

上面我们只是选中了文本,但是不知道选中了什么。HTML5进行了扩展,添加了两个属性selectionStartselectionEnd。分别是文本选取的起点和终点。

txa.addEventListener('select', (e) => {
    console.error('选中内容了')
    console.log(e.target.selectionStart)
    console.log(e.target.selectionEnd)
})
image-20220614215408161
image-20220614215408161

所以可以直接使用slice方法得到选中文本。

txa.addEventListener('select', (e) => {
    console.error('选中内容了')
    console.log('选中文本: ', txa.value.slice(txa.selectionStart, txa.selectionEnd))
})
select
select

分类:

前端

标签:

JavaScript

作者介绍

赤蓝紫
V1

公众号:赤蓝紫