CODEWITHSUNDEEP
jquery
user2129623
user2129623

Reputation: 2257

perform action on enter pressed in div using jquery

There are some similar thread, I already have checked and tested. But dont work for my case.

I have comment box where I want to post comment when user press Enter key. 

<div contenteditable="true" class="commentMark" id="commentMark-<?php  echo $row['p_id'];?>" onblur="if (this.value=='') this.value = 'Write a comment'" onfocus="if (this.value=='Write a comment') this.value = ''" onKeyPress="return SubmitComment(this,event)" wrap="hard" name="commentMark" style=" background-color:#fff; overflow: hidden;">Write a comment</div>

script:

$(function(){
 $('.commentMark').keypress(function (e) {
    if (e.keyCode == 13) {
        alert('You pressed enter!');
    }
 });
});

// $("$commentMark").keypress(function (e) ..

also doe not performs any action.

What's wrong here?

UPDATE I also checked on fiddle that it work. But dont know what wrong on my localhost. It looks like.

wall.php

<script type="text/javascript">
$(function(){
 $('.commentMark').keypress(function (e) {
    if (e.keyCode == 13) {
        alert('You pressed enter!');
    }
 });
});
</script>
<?php
<div contenteditable="true" class="commentMark" id="commentMark-<?php  echo $row['p_id'];?>" onblur="if (this.value=='') this.value = 'Write a comment'" onfocus="if (this.value=='Write a comment') this.value = ''" onKeyPress="return SubmitComment(this,event)" wrap="hard" name="commentMark" style=" background-color:#fff; overflow: hidden;">Write a comment</div>
?>

Anything wrong now? because still it does not work on my localhost.

Upvotes: 0

Views: 171

Answers (2)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Your code works perfectly, there is just an issue, are you sure in your code you're using

$('.commentMark').keypress(function (e) {

because I can see another line of code too

// $("$commentMark").keypress(function (e) ..

Even its commented, but make sure its not being used. Because $ isn't used in selectors! . or # is used similar to CSS.

Edit

Use this: 

<div onkeydown="alrtme()"></div>

Hey, write all the other properties as they have to, but just update the onkeydown in the div.

Then update the function as

function alrtme(){
  if (e.keyCode == 13) {
    alert('You pressed enter!');
  }
});

This is a simple one, which would run when there is a keydown event on the div. And would run and if the key is enter then the alert would come up!

Edit for a bug in your fiddle:

I was going to edit the fiddle, then I thought I should find a return and guess what did I find,

function SubmitComment(myfield,e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{

}
else
return true;
}

its the last one, the SubmitComment is the function that would when the key is pressed. And there you have set the enterkey return to nothing or false. Change it there and write it as:

function SubmitComment(myfield){
  if (event.keyCode == 13){
      /* 
       * you don't need to use the keycode variable, just use them as this..
       * and then submit it ..
       */ 
  }
else
return true;
}

Good luck!

Upvotes: 1

Vikash Pathak
Vikash Pathak

Reputation: 3562

Please make sure you've included the jQuery library. I've checked the code and its working. You can view it here.

JSFiddle

Upvotes: 1

Related Questions