Document

Example

In the following example, we are running the script along with a button with an OnClick event handler. When the click button is pressed, the repeatvalue() JavaScript function is called.

When the script gets executed, it will generate an output consisting of an input field along with a click button on the webpage. When the user enters the text and presses the click button, the event gets triggered and displays the value entered, by the user separately.

Example

Considering the following example, where we are running the script to display textbox value.

   Enter Password: 
 
 function repeatvalue()  

On running the above script, the web-browser displays an input field for the user. When the user enters password-type text into it, it displays stars in the textbox as soon as the user finishes entering, and when the user clicks «enter,» the actual text is displayed on the webpage.

Example

Execute the below code to observe ‘How to display the textbox value on the webpage using JavaScript’.

         Enter your Name: Click Me 

Источник
JavaScript methods to create and manipulate a textbox
This tutorial will help you to understand how you can create a textbox element as well as how you can manipulate various attributes of the textbox using JavaScript.
Create a textbox using JavaScript

First, you need to use the createElement("input") method of the document object to create an element.
Then, you need to set the type attribute of the element that you’ve created to "text" using the Element.setAttribute() method.

The code inside the tag below shows how you can create a textbox and append it to the body element:
The resulting HTML document will be as follows:
 
Now that you know how you can create a textbox using JavaScript, let’s learn how you can manipulate various attributes of the textbox element.
 
Adding id attribute to the textbox using JavaScript
 
First, you may want to add an id attribute to the element so that you can easily fetch the element and retrieve its value. You can easily add the attribute by using the same setAttribute() method.
 
The code below shows how you can add the id attribute with "username" as its value:
 
Next, you may want to add a tag to the textbox to make it clear to users what the textbox is there for. You can do so by using the same createElement() method but replace the parameter with "label" .
 
For example, you may want to create a textbox so that users can enter their username . Here’s how you can create a label for that:
 
The for attribute of the element must match the id attribute of the element so that the label will be bound to the right element. The label text will be read by the device for the user.
You also need to set the innerHTML property of the element. The text inside will be read by screen-reader devices.

Append the label before the textbox with the same appendChild() method
Grab the textbox element using document.getElementById() method, then use insertBefore() method to insert the label before the textbox.

For the first choice, you need to add the code for creating the label before the textbox:
    Now you’re going to have the following output inside the tag:
 
As for the second choice, You need to call the insertBefore() method on the element’s parent, which is the element in this example.
 
 
The newElement to be inserted
 
And the existingElement where the newElement will be prepended.
 
 
The syntax for the method is as follows:
 
Let’s see how it works step by step. First, create the textbox element and append it to the HTML body:
 
  Then, create the label element:
 
Finally, how you can grab the textbox element and call body.insertBefore() method to insert the element above the textbox:
  The full code will be as shown below:
Now you’ve learned how to insert a label for the textbox element.
 
Manipulate textbox placeholder attribute using JavaScript
 
You may also want to set the placeholder attribute for the textbox to give your users a hint about the expected value for the textbox.
 
Since your textbox already has an id attribute, you can use the document.getElementById() method to fetch the element and use the setAttribute() method to set the placeholder:
 
And with that, your textbox will have the placeholder attribute set.
Manipulate the value attribute of the textbox using JavaScript
Finally, the input element also has the value property which you can use the get or set the value stored inside the textbox.
For example, type any text you want into the textbox and then fetch its value:
You can also set the value as follows:
And that’s how you can get or set the value property of a textbox 😉
Learn JavaScript for Beginners 🔥
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
A practical and fun way to learn JavaScript and build an application using Node.js.

About
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
Search
Type the keyword below and hit enter
Tags
Click to see all tutorials tagged with:
Источник
Input Text value Property
The value property sets or returns the value of the value attribute of a text field.
The value property contains the default value OR the value a user types in (or a value set by a script).
Browser Support
Syntax
Return the value property:
Property Values
Technical Details
More Examples
Example
Get the value of a text field:
Example
var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value; 
submitOK = "true";
if (fname.length > 10) alert("The name may have no more than 10 characters"); 
submitOK = "false";
>
if (isNaN(age) || age < 1 || age >100) alert("The age must be a number between 1 and 100"); 
submitOK = "false";
>
if (at == -1) alert("Not a valid e-mail!"); 
submitOK = "false";
>
if (submitOK == "false") return false;
>
Example
var mylist = document.getElementById("myList");
document.getElementById("favorite").value = mylist.options[mylist.selectedIndex].text;
Example
var no = document.getElementById("no");
var option = no.options[no.selectedIndex].text; 
var txt = document.getElementById("result").value;
txt = txt + option; 
document.getElementById("result").value = txt;
Example
An example that shows the difference between the defaultValue and value property:
Источник
How to Get the Value of Text Input Field Using JavaScript
In this tutorial, you will learn about getting the value of the text input field using JavaScript. There are several methods are used to get an input textbox value without wrapping the input element inside a form element. Let’s show you each of them separately and point the differences.
The first method uses document.getElementById('textboxId').value to get the value of the box:
document.getElementById("inputId").value;
html> html> head> title>Title of the Document title> head> body> input type="text" placeholder="Type " id="inputId"> button type="button" onclick="getInputValue();">Get Value button> script> function getInputValue( ) < // Selecting the input element and get its value let inputVal = document.getElementById("inputId").value; // Displaying the value alert(inputVal); > script> body> html>
You can also use the document.getElementsByClassName('className')[wholeNumber].value method which returns a Live HTMLCollection. HTMLCollection is a set of HTM/XML elements:
document.getElementsByClassName("inputClass")[0].value;
html> html> head> title>Title of the Document title> head> body> input type="text" placeholder="Type " id="inputId" class="inputClass"> button type="button" onclick="getInputValue();">Get Value button> script> function getInputValue( ) < // Selecting the input element and get its value let inputVal = document.getElementsByClassName("inputClass")[0].value; // Displaying the value alert(inputVal); > script> body> html>
Or you can use document.getElementsByTagName('tagName')[wholeNumber].value which is also returns a Live HTMLCollection:
document.getElementsByTagName("input")[0].value;
Live HTMLCollection only includes the matching elements (e.g. class name or tag name) and does not include text nodes.
Another method is document.getElementsByName('name')[wholeNumber].value which returns a live NodeList which is a collection of nodes. It includes any HTM/XML element, and text content of a element:
document.getElementsByName("searchText")[0].value;
Use the powerful document.querySelector('selector').value which uses a CSS selector to select the element:
document.querySelector('#searchText').value; // selected by id document.querySelector('.search_Field').value; // selected by class document.querySelector('input').value; // selected by tagname document.querySelector('[name="searchText"]').value; // selected by name
There is another method document.querySelectorAll('selector')[wholeNumber].value which is the same as the preceding method, but returns all elements with that selector as a static Nodelist:
document.querySelectorAll('#searchText')[0].value; // selected by id document.querySelectorAll('.search_Field')[0].value; // selected by class document.querySelectorAll('input')[0].value; // selected by tagname document.querySelectorAll('[name="searchText"]')[0].value; // selected by name
Nodelist and HTMLCollection
The HTMLCollection represents a generic collection of elements in document order suggesting methods and properties to select from the list. The HTMLCollection in the HTML DOM is live, meaning when the document is changed it will be automatically updated. NodeList objects are collections of nodes returned by properties such as Node. There are two types of NodeList: live and static. It is static when any change in the DOM does not affect the content of the collection. And live when the changes in the DOM automatically update the collection. You can loop over the items in a NodeList using a for loop. Using for. in or for each. in is not recommended.
Источник