How do I fill an element using keypress event

Question

This is the code:

<div class="sampletext" contenteditable="true" style="min-height: 40px;">
<span></span>
</div>

What I'm trying to do is filling an element with keypress events.

<div class="sampletext" contenteditable="true" style="min-height: 40px;">
<span>i need  to fill here with keyboard events. {ENTER}</span>
</div>

I have write a basic function which fills the innerHtml,

function myFunction() 
{
    var element = document.getElementsByClassName('sampletext')[0].firstChild;
    element.innerHTML = 'i need  to fill here with keyboard events.\n';
}

Basically this function will do the job, but it won't work in the site which am trying. If am entering it from keyboard it works perfectly. The window is listening for the keyenter event. I'm using Chrome browser. The project was related with the cefsharp.

private void SampleFucntion()
{
    string script = "var element = document.getElementsByClassName('sampletext')[0].firstChild;element.innerHTML = 'i need  to fill here with keyboardevents.\n';";
    myBrowser.ExecuteScriptAsync(script);
}

I already checked input fill with keypress simulation

So please help me how can I achieve this with pure JavaScript.

You've shown absolutely zero code that deals with keyboard events - you'll need to show what you are actually trying and failing to achieve before anyone can point you in the right direction — Jaromanda X, Nov 15 '15 at 14:22
I already mentioned there it is a cefsharp project. What am trying is to fill the span element with javascript keypress event — rebornx, Nov 15 '15 at 14:32
@jaromanda-x there is not really any code other than that. The remaining codes are in c#. — rebornx, Nov 15 '15 at 14:35
so, there's no code handling keypress events - makes it damned hard to do anything with keypress events if there's no code handling keypress events, don't you agree? and C# code is totally irrelevant in the browser — Jaromanda X, Nov 15 '15 at 14:36
@jaromanda-x I'm asking about that how to simulate that keypress events. I already mentioned it was in cefsharp project. — rebornx, Nov 15 '15 at 14:45
on one hand you want to fill an element with keyboard events (an impossibility) but now, you want to "simulate **that** keypress events" ... no, you can not simulate keypress events as there's no possible worldy reason to do so in yor own web page — Jaromanda X, Nov 15 '15 at 14:47
@jaromanda-x sorry, you had understand it wrongly. What am trying is refer here: http://stackoverflow.com/questions/31361790/input-fill-with-keypress-simulation — rebornx, Nov 15 '15 at 14:56

score 1 · Answer 1 · answered Nov 16 '15 at 09:09

1

You can actually send key strokes directly to the browser which is likely easier than executing a block of javascript. Assuming the text box has focus of course.

The SendKeyEvent can be used to send a character at a time.

There is a basic example available in the CefSharp.WPF.Example project. https://github.com/cefsharp/CefSharp/blob/cefsharp/43/CefSharp.Wpf.Example/Views/BrowserTabView.xaml.cs#L32

answered Nov 16 '15 at 09:09

amaitland

4,073
3
25
63

thanks, but that tutorial was changed and I can't get it worked. Also searched but didn't find any exact tutorial for my purpose. – rebornx Nov 20 '15 at 19:05
What tutorial? The code is for a different bug, the concept is basically the same, you can send individual key presses. Just need to make sure the browser has focus, which you can also do programmatically. – amaitland Nov 20 '15 at 22:01
the problem I found in that is, how can I set focus to a control. For example if my input box was in a class called 'sample', I can get that using script but how can I setfocus in to that element? – rebornx Nov 21 '15 at 20:43
Set the focus on the browser control, then use javascript to set the element focus. Then send the individual key strokes. It's not the most elegant, it should get the job done. You have a slightly unusual requirement. – amaitland Nov 21 '15 at 23:20

Azad · Answer 2 · 2015-11-15T14:28:09.890

0

add style to your span

<div class="sampletext" contenteditable="true" style="min-height: 40px;">
   <span style="display:inline-block; width:100%; height:100%;"></span>
</div>

edited Nov 15 '15 at 14:28

answered Nov 15 '15 at 14:21

Azad

5,144
4
28
56

If this is the answer, even if it's the slightest bit relevant, I'll bow to your amazing mind reading abilities!! – Jaromanda X Nov 15 '15 at 14:24
Thanks for the style :D – rebornx Nov 15 '15 at 14:47
Perhaps you should explain what this code does and why you suggested this solution. Because this answer has ben flagged as low-quality because of its length and content and might be simply deleted by reviewers. – nalply Nov 15 '15 at 19:59

Salmin Skenderovic · Answer 3 · 2015-11-15T14:58:36.367

0

Is this what you mean? JS-FIDDLE

document.addEventListener("keyup", function(e){
    var target = document.getElementById("here");
    var value = String.fromCharCode(e.keyCode);
    if (value!="undefined") {
        target.innerHTML += value;
    }
});

edited Nov 15 '15 at 14:58

answered Nov 15 '15 at 14:26

Salmin Skenderovic

1,750
9
22

No. I need to fill the span element with keyboard events. – rebornx Nov 15 '15 at 14:38
1

what do you mean `keyboard events` ... a keyboard event isn't a piece of text you can display in HTML, it is an event – Jaromanda X Nov 15 '15 at 14:46
@jaromanda-x the piece of text I want to fill with like typing from a keyboard, that's what I meant. I know keyboard events can't display in HTML. The thing will achieve only if am fire from a keyenter event. – rebornx Nov 15 '15 at 14:52
Now I understand. I have updated the JS-Fiddle. Check it out and tell me if that's what you ment. – Salmin Skenderovic Nov 15 '15 at 14:59
@salmin-skenderovic sorry, this is not exactly what am looking – rebornx Nov 20 '15 at 19:03

How do I fill an element using keypress event

3 Answers3