CODEWITHSUNDEEP
htmljquery-mobilemobile
Krishna Srinivas
Krishna Srinivas

Reputation: 1710

html5: enable on screen keyboard for a div

Let's say we have a div:

<div>Random text</div>

Now when I tap on this div on mobile/tablet it should bring up on screen keyboard so that I can type. I would like to handle the keys typed using standard events. Any idea how I can bring up the on screen keyboard?

Upvotes: 0

Views: 2213

Answers (3)

Rohit Tiwari
Rohit Tiwari

Reputation: 822

Use Contenteditable attribute of HTML5 on div.

Please see the DEMO

<div contenteditable="true" id="div1"><strong>Click on me to edit the content.</strong>
    Have a look I am a div not a textbox or textarea and I have used
    <strong>"contenteditable"</strong> 
</div>

</br>

<div>Click on me to edit the conetct, 
     <strong>sorry I am not editable</strong>
</div>

Click on the first div you can also edit the content and also attach an event to it

Upvotes: 3

Mitch
Mitch

Reputation: 25

I would suggest using a <textarea> element rather than a normal div. You can apply some CSS to make it look less like a generic input box. Since it is selectable, the on screen keyboard will automatically appear.

http://www.w3schools.com/tags/tag_textarea.asp

Upvotes: 0

Jonas &#196;ppelgran
Jonas &#196;ppelgran

Reputation: 2747

I suggest you hi-jack an textarea or input field (whichever fits your needs best).

div.onclick = focus textarea
textarea.onkeyup = change div content
... etc.

Upvotes: 0

Related Questions