Javascript this input select

HTMLInputElement: select() method

The HTMLInputElement.select() method selects all the text in a element or in an element that includes a text field.

Syntax

Parameters

Return value

Examples

Click the button in this example to select all the text in the element.

HTML

input type="text" id="text-box" size="20" value="Hello world!" /> button onclick="selectText()">Select textbutton> 

JavaScript

function selectText()  const input = document.getElementById("text-box"); input.focus(); input.select(); > 

Result

Notes

Calling element.select() will not necessarily focus the input, so it is often used with HTMLElement.focus .

In browsers where it is not supported, it is possible to replace it with a call to HTMLInputElement.setSelectionRange() with parameters 0 and the input’s value length:

input onClick="this.select();" value="Sample Text" /> input onClick="this.setSelectionRange(0, this.value.length);" value="Sample Text" /> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Form properties and methods

Forms and control elements, such as have a lot of special properties and events.

Working with forms will be much more convenient when we learn them.

Navigation: form and elements

Document forms are members of the special collection document.forms .

That’s a so-called “named collection”: it’s both named and ordered. We can use both the name or the number in the document to get the form.

document.forms.my; // the form with name="my" document.forms[0]; // the first form in the document

When we have a form, then any element is available in the named collection form.elements .

There may be multiple elements with the same name. This is typical with radio buttons and checkboxes.

In that case, form.elements[name] is a collection. For instance:

These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in form.elements .

A form may have one or many elements inside it. They also have elements property that lists form controls inside them.

  
info
 
  

There’s a shorter notation: we can access the element as form[index/name] .

In other words, instead of form.elements.login we can write form.login .

That also works, but there’s a minor issue: if we access an element, and then change its name , then it is still available under the old name (as well as under the new one).

That’s easy to see in an example:

That’s usually not a problem, however, because we rarely change names of form elements.

Backreference: element.form

For any element, the form is available as element.form . So a form references all elements, and elements reference the form.

Form elements

Let’s talk about form controls.

input and textarea

We can access their value as input.value (string) or input.checked (boolean) for checkboxes and radio buttons.

input.value = "New value"; textarea.value = "New text"; input.checked = true; // for a checkbox or radio button

Please note that even though . holds its value as nested HTML, we should never use textarea.innerHTML to access it.

It stores only the HTML that was initially on the page, not the current value.

select and option

A element has 3 important properties:

1. select.options – the collection of subelements,
2. select.value – the value of the currently selected ,
3. select.selectedIndex – the number of the currently selected .

They provide three different ways of setting a value for a :

1. Find the corresponding element (e.g. among select.options ) and set its option.selected to true .
2. If we know a new value: set select.value to the new value.
3. If we know the new option number: set select.selectedIndex to that number.

Here is an example of all three methods:

Apple Pear Banana   

Unlike most other controls, allows to select multiple options at once if it has multiple attribute. This attribute is rarely used, though.

For multiple selected values, use the first way of setting values: add/remove the selected property from subelements.

Here’s an example of how to get selected values from a multi-select:

 Blues Rock Classic   

new Option

In the specification there’s a nice short syntax to create an element:

option = new Option(text, value, defaultSelected, selected);

This syntax is optional. We can use document.createElement(‘option’) and set attributes manually. Still, it may be shorter, so here are the parameters:

• text – the text inside the option,
• value – the option value,
• defaultSelected – if true , then selected HTML-attribute is created,
• selected – if true , then the option is selected.

The difference between defaultSelected and selected is that defaultSelected sets the HTML-attribute (that we can get using option.getAttribute(‘selected’) , while selected sets whether the option is selected or not.

In practice, one should usually set both values to true or false . (Or, simply omit them; both default to false .)

For instance, here’s a new “unselected” option:

let option = new Option("Text", "value"); // creates Text

The same option, but selected:

let option = new Option("Text", "value", true, true);

Option elements have properties:

option.selected Is the option selected. option.index The number of the option among the others in its . option.text Text content of the option (seen by the visitor).

References

Summary

document.forms A form is available as document.forms[name/index] . form.elements Form elements are available as form.elements[name/index] , or can use just form[name/index] . The elements property also works for . element.form Elements reference their form in the form property.

Value is available as input.value , textarea.value , select.value , etc. (For checkboxes and radio buttons, use input.checked to determine whether a value is selected.)

For , one can also get the value by the index select.selectedIndex or through the options collection select.options .

These are the basics to start working with forms. We’ll meet many examples further in the tutorial.

In the next chapter we’ll cover focus and blur events that may occur on any element, but are mostly handled on forms.

Источник

Selecting the all text in HTML text input using JavaScript

In this tutorial, we are going to learn about how to select all text entered in an HTML input (field) when a button is clicked using JavaScript.

Consider, we have the following html input field, button element.

input id="place" value="King towers" /> button id="select">Select Textbutton>

To select all text present inside a text input field when a button is clicked, first we need to access the above two elements inside a JavaScript by using the document.getElementById() method.

const input = document.getElementById("place"); const btn = document.getElementById("select");

Now, we need to attach a click event listener to the btn element, inside that we can select the input text by using the input.select() method.

btn.addEventListener("click",()=> input.select(); // it selects the text >)

We can also select all text in an input field by clicking on the input field itself.

input id="place" value="King towers" onclick="this.select()" />

Similarly, we can use the input.setSelectionRange() method by passing 0, input.value.length as an first and second arguments.

const input = document.getElementById("place"); const btn = document.getElementById("select"); btn.addEventListener("click", ()=> input.focus(); // it focusses the text input.setSelectionRange(0, input.value.length); >)

Источник