Zrzut ekranu 2014-12-20 o 11.01.13

JQuery: text input

Follow me
Follow me

Latest posts by Tomasz Antas (see all)

In this article, we show how to create an input to enter some text and present it as a heading element.

DEMO:

http://jsfiddle.net/2wdX4/1/

 

CHANGE HEADING ON INPUT:

Everything happens in javascript file: plan-creator.js. You can find its source code below. In HTML file, we define only div element and h1 heading which will be replaced by input text element. To do that, we need to add the following function in plan-creator.js:

The heading has id=plan-heading and div containing this heading has id=plan-head. As you can see, we added function for the div element, not for the heading. That’s becasue replaceWith() function removes all events related to replacing element. So we need to work on div element with .on() function and find inside the h1 element.

Then let’s define the repl object, which we want to put instead of h1. Repl contains span element and inside of such element input text and button are placed. The reason of doing that is because then we want to replace the input and button elements by heading h1. Moreover, it is easier to replace one span element instead of these two elements.

Replace the h1 heading via replaceWith() function and put there repl object:

Let’s add also a CSS style. We did it by defining styles object and then adding it by css() function. To add css properly, we need to use:

First of all, it is necessary to find the input element with proper name attribute in div element of inline-spaces class.

 

CHANGE INPUT ON HEADING:

We do it in similar way.

As a first step, let’s find the value of input element, which we want pass to heading. Then assign it to the headInput element. Next, we replace the span element containing input and button elements. Finally, we pass the typed text to replace heading by headInput:

 

RESOURCES:

index.html:

 

js/plan-creator.js:

 

css/creator.css:

 

Download project:

plan

Tomasz AntasJQuery: text input