We Keep Coding

is there a way to get keyboard input on a webpage that listens for it?

I'm working on a Chrome extension whose content script injects a bunch of elements in a webpage, including an input element of type text, on specified actions.
the problem is that while on a webpage like Facebook's home page, which listens for keyboard input (e.g., P), the extension's input element loses focus, which goes to Facebook's "what's on your mind?" section in case of the P.
I tried getting focus back to the input element programtically, and while that seems to be partially working, as it takes focus back from the "what's on your mind?" section immediately, it still doesn't write the 'P' into the text field.
is there anyway to workaround that?
update #0: the code that I tried for regaining focus was as simple as that:
searchBar.onblur = searchBar.focus;
update #1: my input element is inside a shadow DOM. apparently the element doesn't lose focus when it's not part of a shadow DOM. any idea on how to get that to work with the shadow DOM?

Check out this example. You can listen for keyboard events on the highest level (which is document), unless the site blocks propagation of the event.
document.addEventListener('keypress', function(e) {
console.log(e);
}, false);
document.getElementById('text3').addEventListener('keypress', function(e) {
console.log(e);
}, false);
<textarea id="text1"></textarea>
<textarea id="text2"></textarea>
<textarea id="text3"></textarea>
<textarea id="text4"></textarea>

I don't use Facebook; are you saying that when someone types a P, that causes the focus to move to "What's on your mind?" Because if the sequence of events is keypress --> Facebook takes focus --> you take focus back, the keypress didn't occur while your input field had focus, so the typed letter wouldn't show up.
You might have to put those letters into your input's value yourself by listening to keypresses, checking if they missed the input field, converting the keycode into the appropriate letter, and appending it to the input's value.

Calling a click event handler on run-time HTML element

I have an HTML file, in which I am creating a text area when user clicks inside a table cell. Basically, it is a datagrid created using table, and when user clicks on one, it removes the text in cell and replace it with a text area. Below is the code I am using in table's onClick handler.
summaryTableElement.innerHTML = "<textarea id='summaryTextBox' value='TestString' onclick='doNothing(this.id)'> </textarea> <input type='button' onclick='saveSummary()' value='Save' /> "
This is all working fine, and it creates a text area perfectly. It bugs out when user clicks on the text area to modify the data. In that case, the click event handler of the text area never fires. Instead, the table receives the click event, resulting in creating another text area. No matter what user does, the text area receives no event at all.
Now, I am confused as to what to do here.
Edit:
I checked again. turns out, it is firing the child's click event handler. But, event is propagating to parent element too.
Edit:
I tried adding following condition in parent's click event handler
if (id.toString() == "SummaryData")
but this returns true even for child element.

Use a flag indicating the click once. If it is clicked already, then don't run the function. Now the problem of the text area. in your dynamically getting created html code, add an onfocus event handler insteaad of onclick. Also the 'id's cannot be the same for all the text areas you are adding dynamically. Use something like "id='xyz"+i+"'" where 'i' represents a count which is the number of the text area getting added.

Stop clicking on text from cancelling selection

I'm trying to make a simple rich text editor, and I'm getting stuck at the stupidest thing. For the bold buttons, instead of having a button, I'm trying to make it so that, near the top of the screen, there are several spans, and each one has a thing you can do to the text, such as bold, italic, underline, etc, and when you click on one I want it to toggle if the selected text in the contenteditable div is bold, italic, or underline. Basically, instead of buttons, I want to simply click on a span to toggle those things.
So I put a whole bunch of spans in the right place and put event handlers on them that did the appropriate execCommand. However, when the user clicks on the spans, it cancels the selection in the contenteditable div, so that the execCommand doesn't do anything. I tried setting the css user-select to none (I also used prefixes), cancelling the selectstart event, cancelling the click event, but it still cancels the selection when I click on it
You can see the jsfiddle here
I don't want to use a button instead of a span or anything. I don't want to do it in a hacky way (such as copying the selection on input, and then recreating the selection after the click) either

There's a few ways to achieve this. You can prevent the default mousedown behaviour like below:
document.getElementById('bold').addEventListener('mousedown', function (e) {
e.preventDefault();
});
FIDDLE
You can also just use the semantically correct elements such as <button> rather than <span>. If you do not like the way <button> element looks by default just re-style it.
FIDDLE

Prevent losing focus when click out of an input

I'm developing a virtual keyboard in jQuery and my problem is:
When I click on a key of the keyboard the input loses the focus during the click, and if the number of letters in the input is longer than the input size, the input shows the beginning of the string. And then when the click is released the input gets back the focus and the caret comes to the end of the string. So it's quite ugly because we have the impression that the input contents blink.
theButtonDiv.click(function() {
attachedInput.value = idOfAttachedInput.value + theActualKey;
attachedInput.focus();
});
So I would like to prevent the input from losing the focus when we clicked on a button of the keyboard.
How can I do this?
Thanks.

One way is to listen for the "mousedown" event on the top level keyboard node and call preventDefault on the event object.

I think you're looking for a CSS property called outline.
#yourinput {
outline: none;
}
That should take care of the box being highlighted when it has focus.

hide on second click

I have a bubble that pops up when you select some text on a document. Now when you select some text, the body click event fires too. On body event, I have code to hide the bubble that pops up when you select some text. The problem is, I want to show the bubble when the text is selected (even though body event has fired) but I want to hide it when clicked anywhere except inside the bubble.
$('body').live('click', function(e) {
if($(e.target).parents('.discuss').length == 0) {
$('.discuss').fadeOut(150);
}
});
... there is the body event code, now the discuss bubble shows up when some text is selected on the body, the discuss bubble is positioned near the selected text

In the body click handler look at e.target (srcElement in IExplorer). If the target/srcElement is different than the element containing the text you will now that the user has clicked somewhere else in the document and will close the bubble. If the target is the text element itself just return, no need to do anything.

I dont understand clearly by reading your question description.
But as your header title says on "second clik".
flag=0;
Why dont you set a flag value on first click on a hidden field.
(flag=1)
Then on second click check the hidden field value and do what you want. if(flag==1) do it
Show hide or whatever.
Dont forget to reset the value again.

have you tried using mouseup instead of click on the body? that way the bubble will only appear when visitor selected the text and releases their mouse...