Search jQuery

jQuery Forum

$(event.target) works on click, but not keydown... alternative?

in Using jQuery • 3 years ago

I have this script working just fine when I click on it using the mouse, but it doesn't trigger the while() loop if I move to it using arrows:

$('[data-ce]')
.on('keydown click', function(e) {
var node = $(e.target);
while (node.is('contenteditable') !== 'true') {
alert('node - ' + node[0].nodeName);
alert('this - ' + this.nodeName);
if (node[0].nodeName == 'B' && !$('[data-richcont="B"]').hasClass('richbuttonOn'))
$('[data-richcont="B"]').removeClass('richbuttonOff').addClass('richbuttonOn');
node = node.parentNode;
}
});
})

This is within a contenteditable section, much like the reply field in this forum. When the user has bolded something, I'm changing the class for the "Bold" button to highlight.

I'm pretty sure that the problem is that when I key over to the bolded section manually, $(e.target) becomes equal to "this" instead of to the innermost node.

Is $(e.target) the wrong thing to use here? If not, can you guys suggest how to make it recognize properly when I key over to it?

Replies(30)

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

node.is('contenteditable') Is never true. You’re asking if the tag is <contenteditable>.

You probably want node.is('[contenteditable]')

http://api.jquery.com/is/ <--

Don’t debug with alert. Use console.log.

.on('keydown click', function(e) {
console.log(e.type,this,e);

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

node.is('[contenteditable]')

Cool, thanks

I was actually just now debating on whether I could just do if (node !== this), since [data-ce] represents the contenteditable section... it worked on my test run, anyway.

Don’t debug with alert. Use console.log.

Honestly, that's just me being lazy... I plugged the example in to jsfiddle before posting, and I'm not sure how to use console.log there.

I've been working on this seemingly-simple thing for 3 days now, though, and I'm no closer to a solution now than I was when I started. I haven't been able to find an all-inclusive list of event.foo or event.foo.bar, so all I've been able to do is hunt around for things others have done.

Even reading the JS files on here didn't help

I'mma go crazy before long...

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Next time, share the jsfiddle that you build.

https://jsfiddle.net/jakecigar/8kmxjoLc/ is a starter fiddle with firebug lite.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Awesome, thanks

Lemme know if this is updated with my info:

https://jsfiddle.net/8kmxjoLc/4/

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

node !== this is never true.

node is a jQuery, and this is an element.

https://jsfiddle.net/jakecigar/8kmxjoLc/9/ shows that you don’t get the tag where the user is typing.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Ahh, I gotcha.

So any suggestions on how I would modify it so that keydown returns the B instead of the DIV?

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

The browser-given events don’t hint at it.

A kludgey idea would be to compare the html before and after the event. But it seems like a lot of code for a strange requirement, that I don’t understand.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

I'm doing the same thing as the Reply section when you reply on here... when you bold something and then click on it or key over to it, the "B" key lights up to show that it's in bold.

Once I get it figured out, I plan to take it a step further. On my message board, some users have picked up a habit of copying what someone else says, then modifying it to make it look like they said something else. So my plan is to wrap the pasted quote with a styled <blockquote>, and then if the user tries to type something within that blockquote then I'll automatically break them out of it (eg, add in </blockquote> <blockquote>).

I know it can be done because this site does it (via zohodiscussions.com, apparently). But I've read through all of the JS here and can't find where this part of the code is.

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

I don’t see it inserting a blockquote here.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

No, I was trying to keep this example as simple as I can. Once the keydown shows the B tag properly then the same logic "should" find the BLOCKQUOTE, and I "should" be able to do the rest on my own.

But it all comes down to that first line... if $(e.target) is returning the container node instead of the immediate parent, then there must be some other way to find it.

jakecigar

Re: Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

I found https://jsfiddle.net/cpatik/3QAeC/ that has some cool functions you might use.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Thanks, Jake! I wish I'd seen that about a month ago, it would have saved me a ton of work!! lol

I feel like I'm getting pretty close. I discovered node.children() will actually get the first tag, but I'm still struggling to cycle through all of them.

Here's where I am:

$('[data-ce]')
.on('keydown', function(e) {
var node = $(e.target);
var kids = node.children();
console.log(kids, kids.length);
for (var i=0; i < kids.length; i++) {
console.log(kids[i]);
}
});

And I'm arrowing inside of the text:

Test

(I know that the tag is deprecated, but it's the only way that document.execCommand() will plug in the fonts)

In this, kids will return [font], so it gets the first tag properly! I thought it would load all of them as an array, but kids.length returns 1, and then kids[0] returns .

So I'm guessing that I need to traverse a while() loop again, but using the while() loop above never triggers. How do I loop through the children?

Here's the fiddle:

https://jsfiddle.net/8kmxjoLc/35/

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

https://jsfiddle.net/jakecigar/t6ev4byd/ seems to be able to differentiate the b from the not b. But it uses previous sibling, which is very strange, and probably not very cross-browser reliable.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Good news, I'm an inch away!! Here's where I am:

var node = $(e.target);
var kids = node.children();
// returns FONT
console.log(kids[0].nodeName);
var x = 0;
// returns FONT, B, I, U
while (kids[0].nodeName && x < 5) {
console.log(kids[0].nodeName);
kids = kids.children();
x++;
}

The only remaining problem is how to end the while() loop when there are no remaining nodes. I put in the x counter as a safety, but without it I go in to an infinite loop.

I've tried (kids[0].nodeName !== '') and (kids[0].nodeName !== NULL), too, but neither work.

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

You are looping through the first child of the first child of the contenteditable.

Your code will not work.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Hmm, I see what you mean. When I use this text:

Test Test Test 2

it still only gives the nodes for the first Test.

If I manually change kids[0] to kids[1], though, it shows the U.

So for that to work I'll have to loop through all of the TEXT nodes... blerg.

Any other suggestions before I tackle that?

jakecigar

Re: Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Did you look at my last fiddle?

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

I did, but since you said it wouldn't be cross-browser compatible it made me nervous. I'm thinking I can use getSelection to pick where it starts, though, and then use .children() to filter down through the nodes?

jakecigar

Re: Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

You need to test it in all browsers, and maybe add special case code. Nothing else I found gets close to finding the node it was typed into.

Other than keeping the CE’s html in a var and comparing the current value to the old value, very little seems to work.

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Using the info you gave me, Jake, it looks like changing $(e.target) to this made the original loop work:

node = getSelection().anchorNode.parentNode;

Since this isn't using $(e.target), it's just "node" instead of "node[0]", too.

So far I've tested with Chrome, FF, IE9, and Android, with no apparent problems :-)

jakecigar

Re: Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

getSelection().anchorNode is the answer. I’d like to see what you did with it!!!

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

I posted it earlier but it didn't show up for some reason... here's the final code:

$('[data-ce]')
.on('click keydown', function(e) {
var node = getSelection().anchorNode.parentNode;
while (node.getAttribute('contenteditable') !== 'true') {
console.log(node.nodeName);
node = node.parentNode;
}
});

And the final fiddle:

https://jsfiddle.net/8kmxjoLc/83/

This one lets me click or key over and it returns the proper nodes

Thanks for all the help!

jakecigar

Re: Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Great! I hope it will be of assistance to the future generation of programmer who see this!

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

I hope so, too, because I couldn't find this ANYWHERE! Even now that I have a solution and know what to look for, I still can't find it.

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

I'm still getting a minor error here, so if anybody has a suggestion...

I'm using this text in the contenteditalbe:

Test Test Test 2 Test 3

If I click on the empty line before or after "Test 3", I get an error on this line:

while (node.getAttribute('contenteditable') !== 'true') {

Both Chrome and FF throw an error that node.getAttribute is not a function"

I've tried the following variations:

while (node && node.getAttribute(...
while (node.nodeName && node.getAttribute(...
while (node.getAttribute && node.getAttribute(...
if (node)
while (node.getAttribute(...
while (getSelection() && node.getAttribute(...

but none of these fixed the error.

You can see the fiddle here:

https://jsfiddle.net/8kmxjoLc/94/

You'll see that clicking the empty lines returns nodes of DIV, BODY, and HTML, when I'm expecting them not to return anything.

Any suggestions?

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

https://jsfiddle.net/jakecigar/8kmxjoLc/113/ works 2 ways!

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Awesome, thanks

In the live script, I also ended up having to add node !== null... so:

while (node !== null && !(node.hasAttribute && node.hasAttribute('contenteditable'))) {

jakecigar

Re: Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Glad you liked that version. The jQuery version is better!

JΛ̊KE

csdude55

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

Honestly, I chose the second one because I couldn't understand the first... lol

But while the end result of putting all of the nodes in to a new array (nodes) is appealing, for my purposes I would still have to create a for() loop, so any speed saved would be lost there

jakecigar

Re: $(event.target) works on click, but not keydown... alternative?

3 years ago

The important part of it is

$(node).parentsUntil("[contenteditable]")

That’s an array-like list of nodes. Should work in every browser since IE6 or so! Depending on the jQuery version.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

$(event.target) works on click, but not keydown... alternative?

Replies(30)

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Re: $(event.target) works on click, but not keydown... alternative?

Statistics

Tags

Actions