Keypress event on nested content editable (jQuery) - javascript

I have a CONTENTEDITABLE div and inside that div I have a CONTENTEDITABLE span, what I want to do is being able to handle the onkeypress event on the inner SPAN.
So, the javascript code would be:
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
And the HTML content would be:
<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>
If you test it on a browser you'll see you won't see the 'test' dialog when you press a key over Some TEXT, I know the problem is that the event is being triggered in the parent div, so the SPAN doesn't get the event, also because it doesn't have the focus. So I'd like your help to find a solution for this.

The exact code you posted in your question seems to work just fine at http://jsfiddle.net/gaby/TwgkC/3/
Tested and working with FF, Opera, Chrome, Safari, IE8 ..
only change is the removal of the comment which in its current form creates a syntax error.
The #someid need to have focus in order for the keypress to work.
If you want your code to give focus to the element right after creating it, use the .focus() method.
function AppendSpan()
{
$('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
//Then I want to handle the keypress event on the inserted span
$('#someid').keypress(function(event){
//do something here
alert(this.id);
}).focus();// bring focus to the element once you append it..
}
Update
Two ways to handle this (the fact that there are nested contenteditable elements), not sure if any is acceptable for your case but here they are..
wrap the new contenteditable span in another one, which is set to have contenteditable="false"
(demo: http://jsfiddle.net/gaby/TwgkC/10/)
make #mydiv to not be contenteditable once you add the span..
(demo: http://jsfiddle.net/gaby/TwgkC/11/)

You might be better to bind the keypress event to the #mydiv element like this:
$('#mydiv').delegate("span", "keypress", function(){
console.alert('A key has been pressed: ' + this.id);
});
On further investigation though, it seems that DOM elements such as regular spans and divs are incapable of receiving focus. You may be able to get around this however, by adding a tabindex attribute to each span.

Related

Focus on a div parent even when focusing on a child and then blur if not

PREFACE: I want to focus the wrapper, then the additional element below the textarea shows, and I want to click inside it without the blur event interfering (in case that I attach it to the textarea, which works, but I can't use the element below).
I have the following structure:
<div (focus)="onInputFocus()" (blur)="onInputBlur()">
<textarea></textarea>
// Some additional element here
</div>
I want to enable focus for the div element, but I do not know how. I have tried using tabindex , but without any luck, like this:
<div tabindex=1 ... >
Usually the focus was meant for the textarea, but I need some additional content with it in a wrapper, which needs a focus event.

Getting the current div id in content-editable div(specific)

I am recently working on one of my projects and currently i am stuck in some problem. Well, i have made a content editable div where the user can type its input. This content_editable div contains several div's in which user has to type. I tried document.activeElement but it gives me the content_editable div not the specific div and that the one with id second_div
I want to know how to find that specific div in content_editable div where user is type.For example:-
<div contenteditable="true" id="content_editable_div">
<div id="first_div">
I am the first div
</div>
<div id="second_div">
I am the second div and i want to know if the focus is on me
</div>
</div>
My Javascript:
window.onload = function () {
getDivwhohasfocusincontentedtiablediv(); // Something like that
};
I can use jquery but only at the last choice. I want to use only javascript for this purpose.Please help me to solve this, i didn't find solution for this all the net ( it could be that i haven't searched carefully). Thanks in advance
One possible solution is to attach an Event Listener on each inner div to listen for "focus" event. However I found out that not all elements emit "focus" events.
JQuery docs says:
The focus event is sent to an element when it gains focus. This event
is implicitly applicable to a limited set of elements, such as form
elements (input, select, etc.) and links (a href). In recent
browser versions, the event can be extended to include all element
types by explicitly setting the element's tabindex property. An
element can gain focus via keyboard commands, such as the Tab key, or
by mouse clicks on the element.
Adding tabindex attribute to each inner div will make it possible to listen to focus events.
Example at JSFiddle. Note: I wrote the code in JQuery but it can easily be written in JS.
You can find focus element in js using this,
var focused = document.activeElement;
What about this ,
<div contenteditable="true" id="content_editable_div">
<div id="first_div">
First Div
</div>
<div id="second_div">
Second Div
</div>
</div>
$(document).ready(function () {
function onMouseUp(e) {
console.log(this.id);
}
document.getElementById("first_div").addEventListener("mouseup", onMouseUp, false);
document.getElementById("second_div").addEventListener("mouseup", onMouseUp, false);
});
Demo Here JS FIDDLE
to get specific div
in Javascript you can use
document.getElementById("second_div")
or using Jquery
$("#second_div")
make sure your id was unique. This is the fastest way to find obj in any browser.
now for getting getting the active div. why not put specific event whenever the div was clicked or edited. like:
$("#second_div").click (function (){
//raise flag or something
currentDiv = "second_div";
})
function getCurrentDiv()
{
//do something in currentDiv
}
or try also explore other event such as, on mouse over, on mouse leave, etc.
i hope that might help. other wise, please elaborate your question if I missed something.

jQuery contentEditable not working - Internet Explorer 8 - edit table items

I need to get this code working in Internet Explorer 8:
http://jsfiddle.net/tYtQV/5/
$("tbody tr td").bind("click", onClick);
function onClick(e) {
if(e.currentTarget.contentEditable != null)
{
$(e.currentTarget).attr("contentEditable",true);
}
else
{
$(e.currentTarget).append("<input type='text'>");
}
}
It works fine in Firefox or Chrome but not in IE8.
I tried changing bind() to live() but that doesnt have any effect - when I click on the list item it just doesnt do anything (the event handler is called, though)
If I change contentEditable to all lowercase "contenteditable" it appends text forms to the element every time it is clicked, which is not what I want.
The purpose of this code is to make table items editable. Any ideas on how to fix this?
Thanks in advance!
TD-elements cannot be set as contenteditable. Check this page for reference: http://msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx
You could add an empty div to the cell and make that one contenteditable
the only problem with adding contenteditable in a div is the placeholder issue because the area will be editable only to that specific region. If you have a placeholder and remove the placeholder to write more, it removes the ability to edit, so make sure to handle that.
There are many elements in IE, which can't have contenteditable set directly. However, you can wrap the whole table into a content editable div.
<div contenteditable="true">
<table>
...
</table>
</div>

OnFocus/OnBlur events not registered

I feel really stupid asking for this, but remarkably I'm banging my head for an hour already. Here is the code:
<div id="img1" onfocus="alert('test');" onblur="alert('test');">
<img id="image1" name="image1" src="image1.jpg" alt="Pciture 1">
</div>
Both events (Focus/Blur) should call a function, but even this simple test (alert) doesn't work. Both of these tags are in the body section, tried changing the DOCTYPE definition - no effect.
W3 spew an error:
there is no attribute "ONFOCUS"
My main goal is to use the events directly on the img tags, but for some reason that doesn't work either.
by default div is not an interactive element so it does not gain focus at all, try to add an tabindex attribute to div such as tabindex="1" then it will be focusable
<div> and <img> don't normally have a focus or blur event, but you can try setting a tabindex on it as a workaround. It's a bit strange though.
http://www.quirksmode.org/dom/events/blurfocus.html
The onfocus event occurs when an
element receives focus either by the
pointing device or by tabbing
navigation. This attribute may be used
with the following elements: A, AREA,
LABEL, INPUT, SELECT, TEXTAREA, and
BUTTON.
Source: w3c HTML4 spec
Neither a div nor an img can receive or lose focus, these are not interactive elements. You can enable them getting focus with setting tabindex.
there are nodes which are not
focusable by default, like div, span,
table, etc, but can receive focus if
tabindex is applied
Source: http://nemisj.com/focusable/
The W3C validator is correct, the div tag does not have onfocus or onblur as attributes.
See here:
http://www.w3schools.com/tags/tag_DIV.asp
Maybe the events onmouseover and onmouseout are what you're looking for
You should not use inline JS for your event handlers. Use unobtrusive javascript instead.
Div Tag has no onfocus and onblur event. Please try mouseover ,mouseout etc..
You can stop banging your head, first it hurts, secondly you can't ues onfocus or onblur on div elements.
Check da link:
W3C
What are you trying to achieve?

jquery set focus on dynamic content?

In jquery I've appended a <li> element to an unordered list.
How do I focus on the newly created <li> ?
If I do the following:
$("ul").append('<li><input type="text" value="Hi!"></li>');
$("li:last").focus(); //doesn't work because new <li> isn't in dom yet
the focus doesn't work, as noted above.
I know jquery 1.4.2 has a live() event handler which allows you load event handlers to dynamically added elements, but I'm not sure what I'm doing wrong:
$(document).ready(function () {
$('li').live('load', function () {
alert("hi!");
$("li:last").focus();
});
});
You can only set the focus to elements which can hold the focus. By default a list item cannot. This is why your first example fails, not because it isn't in the DOM (it is in the DOM, that is what append does)
In general you should use elements designed to hold the focus (i.e. set the focus on the input not the list item). You can also (but this is less backwards compatible and less logical) use HTML5's tabindex (probably setting it to 0).
onload will not work because list items do not load external content.
You can try this, $(YourElement).trigger("focus").
This is an old post I know, but a simple way to solve this issue is to create a text input in your HTML and set its CSS to "display: none;". On the LI's click event, set the focus in this input and listen to its keypress events.
I've done it and it works like a charm.

Categories