当前位置：网站首页>Use of form text box (I) select text

Use of form text box (I) select text

2022-07-03 14:35:00 【Red blue purple】

Use of form text boxes ( One ) Select text

Small skills

adopt document.forms To get all the form elements
adopt form.elements To get all the form elements of the form
Useful properties of the form tabIndex： The number , Indicates that the form field is pressing Tab The switching order when pressing the key , The default order is from small to large

<form action="">
    <input type="text" tabindex="1">
    <input type="text" tabindex="3">
    <input type="text" tabindex="2">
</form>

The text box

There are two types of text boxes ：

input： Single line text box . size Property specifies the width , Indicates the number of characters that can be displayed at one time ( It can actually show a little more ); maxlength Property specifies the maximum number of characters ; value Property specifies the initial value of the text box .
textarea： Multi-line text box . rows Specifies the height of the text box ; cols Specifies the width of the text box , I won't support it size attribute . The initial value should be within <textarea> and </textarea> Between , Use value Invalid specification .

input and textarea Will be in value Properties save their own content , You can set and read the value of the text box . stay textarea Set in value attribute invalid

 <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 text

select Method

The text box has a select Method , You can select all the contents in the text box , When this method is called, the focus will be automatically set to the text box .

<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()"> Select the contents of the multiline text box </button>

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

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

select event

When the text in the text box is selected , Will trigger select event .select The event will be triggered immediately after the user selects the text (IE Except for the old version ).

<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(' Selected content ')
        })
    </script>
</body>

Get the selected text

We just selected the text above , But I don't know what I chose .HTML5 It has been extended , Added two properties selectionStart and selectionEnd. They are the starting point and ending point of text selection .

txa.addEventListener('select', (e) => {
    console.error(' Selected content ')
    console.log(e.target.selectionStart)
    console.log(e.target.selectionEnd)
})

So you can use it directly slice Method to get the selected text .

txa.addEventListener('select', (e) => {
    console.error(' Selected content ')
    console.log(' Select the text : ', txa.value.slice(txa.selectionStart, txa.selectionEnd))
})