CODEWITHSUNDEEP
javascripthtmlinputtextfield
randomizertech
randomizertech

Reputation: 2329

Make a DIV act as an INPUT field

I am currently using a bunch of input textfields and I want to change it to a DIV, but most of my JS functions use document.getElementById("inputField1").value whenever the value of the input field is set like this: 

<input contenteditable="false" id="inputField1" type="text" size="12" style="background:#09F;color:#FFF;text-align:center" value="Hello World!"/>

That would return just Hello World! if I were to display the value in an alert

How would I get the value of the text in between if I were to use DIVs?

For example <div id="inField001">Hello World</div>

Thanks!

Upvotes: 4

Views: 3576

Answers (5)

Geeky Guy
Geeky Guy

Reputation: 9399

Use the innerHTML property.

document.getElementById("inField001").innerHTML

BTW this kind of thing is way better to do with jQuery.

Upvotes: 1

PSL
PSL

Reputation: 123739

You would just do

var value = document.getElementById('inField001').innerHTML);

But if your DIV has some html this will grab that too.

.innerHTML

You can also use document.getElementById('inField001').textContent) to grab just the text nodes from the element ignoring any element wrappers.

But support for textContent is not as good as innerHTML. See doc for info and support.

Another way is using innerText. alert(document.getElementById('inField001').innerText); but not supported in FF.

See Doc for support.

Fiddle

Upvotes: 5

gerti
gerti

Reputation: 132

or just do

x = document.getElementById("inField001");
alert(x);

Upvotes: -1

rGil
rGil

Reputation: 3719

For just text content:

var value = document.getElementById('inputField1').textContent;

For the more verbose version, see here.

Upvotes: 0

DarkAjax
DarkAjax

Reputation: 16223

In that case you can use:

document.getElementById('inField001').innerHTML

Or:

document.getElementById('inField001').innerText

Or:

document.getElementById('inField001').textContent

Also (if you want to use jQuery):

$('#inField001').text()

Upvotes: 8

Related Questions