Document

Изменение заголовка h2 при вводе текста в input

Столкнулся с проблемой. Хочу чтобы при вводе в инпут текста добавлялось в содержимое элемента h1 с задержкой 300мс.

        setTimeout(replaceTitle(), 300); 

Ответы (3 шт):

Попробуйте повесить на событие ввода.

let input = document.querySelector('#input'); let title = document.querySelector('#title'); input.addEventListener("keyup", (e)=>< e.preventDefault(); setTimeout(replaceTitle, 300); >); function replaceTitle() < title.textContent = input.value; // это замена title document.title = input.value; // это замена title документа >

document.addEventListener("DOMContentLoaded", function () < let input = document.createElement("input"); document.body.append(input); let h2 = document.createElement("h2"); document.body.append(h2); let timeout; function enteringText() < let text = input.value; if (timeout) < clearTimeout(timeout); >timeout = setTimeout(() => < h2.innerHTML = text; >, 300); > input.addEventListener("input", enteringText); >);

 // add element, style and class let input = document.createElement('input'); input.classList.add('input') input.type = 'text'; let h2 = document.createElement('h2'); h2.classList.add('head') h2.style.padding = '10px 0'; h2.style.backgroundColor = '#eee'; document.body.append(input); document.body.append(h2); // function // Ищем элементы по классу let classInput = document.querySelector('.input'); let classHead = document.querySelector('.head'); // Пустая переменная для взаимодействия с ( clearTimeout() ) и ( setTimeout() ) let timeout; // Функция которая выводит текст из ( input ) в ( h2 ) function inputText() < // используем ( .textContent ) чтобы избежать неприятностей :) classHead.textContent = classInput.value; >// Функция которая дает нам задержку function outputText() < // Здесь будет очищаться наш таймаут. // Пока текст набирают со скоростью 300мс и меньше(оооочень быстро), // то текст не покажется в заголовке timeout = clearTimeout(timeout); // Здесь выводиться текст в заголовке с задержкой в 300мс // Используем нашу функцию что выше ( inputText ) timeout = setTimeout(inputText, 300); >// Запускаем нашу функцию ( outputText ) по событию ( input ) // input - ввод(взаимодействие) текста(с нашей строкой ввода) classInput.addEventListener('input', outputText);

Как-то так. Только что все теги тоже через JS добавил. А так принцип поиска по классу. Буду думать что помогло 🙂

Источник

HTML DOM Element title

The title property sets or returns the value of an element’s title attribute.

The title attribute specifies extra information about an element. It can be shown as a tooltip text when the mouse moves over the element.

Related Pages

Syntax

Return the title property:

Property Value

Return Value

Browser Support

element.title is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML DOM Element title

The title property sets or returns the value of an element’s title attribute.

The title attribute specifies extra information about an element. It can be shown as a tooltip text when the mouse moves over the element.

Related Pages

Syntax

Return the title property:

Property Value

Return Value

Browser Support

element.title is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML DOM Input Text Object

The Input Text object represents an HTML element with type=»text».

Access an Input Text Object

You can access an element with type=»text» by using getElementById():

Example

Tip: You can also access by searching through the elements collection of a form.

Create an Input Text Object

You can create an element with type=»text» by using the document.createElement() method:

Example

Input Text Object Properties

Property	Description
autocomplete	Sets or returns the value of the autocomplete attribute of a text field
autofocus	Sets or returns whether a text field should automatically get focus when the page loads
defaultValue	Sets or returns the default value of a text field
disabled	Sets or returns whether the text field is disabled, or not
form	Returns a reference to the form that contains the text field
list	Returns a reference to the datalist that contains the text field
maxLength	Sets or returns the value of the maxlength attribute of a text field
name	Sets or returns the value of the name attribute of a text field
pattern	Sets or returns the value of the pattern attribute of a text field
placeholder	Sets or returns the value of the placeholder attribute of a text field
readOnly	Sets or returns whether a text field is read-only, or not
required	Sets or returns whether the text field must be filled out before submitting a form
size	Sets or returns the value of the size attribute of a text field
type	Returns which type of form element a text field is
value	Sets or returns the value of the value attribute of the text field

Input Text Object Methods

Method	Description
blur()	Removes focus from a text field
focus()	Gives focus to a text field
select()	Selects the content of a text field

Standard Properties and Events

The Input Text object also supports the standard properties and events.

Источник