1

I have a textarea where user can type a comment and press enter to submit the comment and then after that the textarea's text should be cleared and the placeholder should appear so i used this function

<tr id="SC-1-Comment" style="background-color:white;">
<td colspan="2">
    <textarea id="id_COMMENT_to_POST-1" name="Comment" style="resize: none; vertical-align: middle;" placeholder="Leave a comment..." 
        onkeydown="
        if (event.keyCode == 13 && !event.shiftKey) 
        {
            event.preventDefault();
            NEW_COMMENT('commentsinnerhtml-1', '1',document.getElementById('id_COMMENT_to_POST-1').value); 
            $('#id_COMMENT_to_POST-1').val('');
        }
        "></textarea>
</td>

In chrome and IE it works but in Firefox, it just ends up clearing the text and inserting a new line in the textarea and thus placeholder won't appear as there is a new line in the textarea.

Any suggestions?

BOSS
  • 1,828
  • 11
  • 34
  • 60
  • 2
    You're using jQuery. Is there a reason you can't assign events the jQuery way? Separate script from html? – Daedalus Aug 24 '13 at 00:10
  • I tried and it didn't work :/ – BOSS Aug 24 '13 at 00:12
  • 1
    `@` aren't valid characters in [ID selectors](http://api.jquery.com/id-selector/). If this is a view, perhaps Razor, please include the resulting client-side markup. But, you also don't need to select the element the event is bound to -- `this.value`. – Jonathan Lonowski Aug 24 '13 at 00:13
  • @JonathanLonowski If this is HTML 5, the only character that isn't valid for the id attr is `space`. However, that doesn't mean special characters in an id attr work well with JavaScript without proper handling. – stevelove Aug 24 '13 at 00:16
  • @BOSS Please give us the actual id generated by the MVC code. Periods will not work in jQuery unless you're referring to a class. – Daedalus Aug 24 '13 at 00:18
  • 1
    @stevelove HTML5 is probably fine with them, but CSS Selectors aren't. And jQuery selectors are based on CSS rules. – Jonathan Lonowski Aug 24 '13 at 00:18
  • @JonathanLonowski My mistake. I failed to notice your link was pointing to jQuery's selector documentation and assumed you were referring generally to the id attribute. – stevelove Aug 24 '13 at 00:22
  • I just answered my own question and i found a solution please check it out. – BOSS Aug 24 '13 at 08:05

2 Answers2

1

Try the vanilla JavaScript approach, keep it nice and simple.

document.getElementById("text-area-id").value = '';

Can't imagine why it wouldn't work.

user2712640
  • 31
  • 2
  • @BOSS "Didn't work" isn't a problem description. Tell us what happened, what didn't happen, and what error message you received. – Daedalus Aug 24 '13 at 00:21
  • http://jsfiddle.net/5akRg/1/ Works fine for me. Perhaps you're doing something wrong with the DOM? More info, please – user2712640 Aug 24 '13 at 00:53
  • I just answered my own question and i found a solution please check it out. – BOSS Aug 24 '13 at 08:05
0

I solved it, it wasn't the DOM or anything, i just had to use a settimeout interval, i don;t know why but probably the web browser just needed a few milliseconds between the two operations. and here is the new code

<tr id="SC-@ep.POST_ID-Comment" style="background-color:white;">
<td colspan="2">
    <textarea id="id_COMMENT_to_POST-@ep.POST_ID" name="Comment" style="resize: none; vertical-align: middle;" placeholder="Leave a comment..." 
        onkeydown="
        if (event.keyCode == 13 && !event.shiftKey) 
        {
            event.preventDefault();

            var post = document.getElementById('id_COMMENT_to_POST-@ep.POST_ID').value;

            $('#id_COMMENT_to_POST-@ep.POST_ID').val('');

            setTimeout(function () {
            NEW_COMMENT('commentsinnerhtml-@ep.POST_ID', '@ep.POST_ID', post);
            },100);
        }
        "></textarea>
</td>

BOSS
  • 1,828
  • 11
  • 34
  • 60