CODEWITHSUNDEEP
javascriptjqueryhtml
HiDd3N
HiDd3N

Reputation: 504

on enter empty and focus on textarea

I need to empty and focus on textarea on keypress which keypress is enter.i think i wrote right code but sometimes textarea get empty but no focus happens and sometimes focus happens but with no luck in emptying this object.i used many diffrent code but with no luck.

Here is my js:

<script>
$(document).ready(function() {
    $("#data").focus(function() {
    $(this).empty();
    $(this).focus();
    });
})


    // when the client hits ENTER on their keyboard
    $('#data').keypress(function(e) {


    $this = $(this);
    if($this.val().length == 1)
    {
        var x =  new RegExp("[\x00-\x80]+"); // is ascii

        var isAscii = x.test($this.val());

        if(isAscii)
        {
           $("#data").css({"direction": "ltr", "text-align": "left"});
        } else {
            $("#data").css({"direction": "rtl", "text-align": "right"});
        }
    }


        if (e.shiftKey && e.keyCode == 13) {
            $(this).val($(this).val() + "\n");
            return;

          }
            if(e.which == 13) {
                if($this.val().length == 0){
                    alert('your value is empty')
                }

                var now = time();
                if(now+0.5 > counter){
                counter = now;
                $(this).blur();
                $('#datasend').focus().click();
            }else{
            }
            }
        });
    });

and here is my html part:

    <div class="wrap">
    <div class="rooms">
    <div class="clear"></div>
        <div class="roomsicon">
chatrooms
        </div>
        <ul id="rooms">
        </ul>
    </div>
    <div class="chat_box_container">
    <div class="chat_box" id="mydiv">
    <div id="conversation"></div>
    </div>
    <div class="input_field">
        <textarea id="data" placeholder="type your text ... " ></textarea>
        <input type="button" id="datasend" value="send" />
    </div>

    </div>
    <div class="users">
        <div class="usersicon">online users </div>

        <ul id="users">
        </ul>
    </div>

    </div>
    <!-- clear float -->
    <div class="clear"></div>

Upvotes: 0

Views: 1159

Answers (3)

Hilary
Hilary

Reputation: 36

There's an autofocus html5 tag (boolean, no value needed) that will automatically put the focus on whatever input/textarea it's set on: http://www.html5tutorial.info/html5-autofocus.php

Great bit of js fallback code here: http://sampsonblog.com/tag/html5

Think of it like if js is available, autofocus on a form input cross browser compatible, if js is not available HTML5 enabled browsers still show autofocus.. now the only bit you're missing is the 'press a key' to autofocus if you definitely need that functionality, so you need to trigger the code above using the enter key, seems more elegant just to execute the autofocus, though I know it annoys disabled users not to control where their cursor is on the page so a key execution could be better from that point of view, but there is a way to disable the autofocus attribute on their end if it makes it difficult for disabled users to navigate so not to worry about that too much..

The accesskey attribute is under discussion for html5, it was dropped but taken up again, this would be the best way to use a key to give focus to a form element but as I said it's under discussion and could be dropped again: http://lists.w3.org/Archives/Public/public-html-a11y/2010Jul/0103.html

Upvotes: 0

Vince
Vince

Reputation: 1527

You don't have an element with the id "data" in your code. Additionally you are binding the keypress on the #data-element which of course doesn't fire, when the focus is not inside the element. Try binding the event to the document instead of the textarea.

Upvotes: 0

epascarello
epascarello

Reputation: 207557

empty() does not remove the value.

set .val("");

You are basically causing an endless loop with calling focus inside the focus event. Not good.

$("#data").focus(function() {
    $(this).val('');
});

Also why are you reinventing the HTML5 placeholder attribute that you already have on the element?

Upvotes: 1

Related Questions