Question

我需要清空并专注于按键输入的按键上的textarea。我认为我写了正确的代码但有时textarea变空但没有焦点发生，有时焦点发生但没有运气清空这个对象。我使用了很多不同代码，但没有运气。

这是我的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{
            }
            }
        });
    });

这是我的html部分：

    <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>

Answer 1

empty()不会删除该值。

设置.val("");

你基本上会在焦点事件中调用焦点而导致无限循环。不好。

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

另外，为什么要重新构建元素上已有的HTML5占位符属性？

Answer 2

您的代码中没有id为“data”的元素。另外，当焦点不在元素内时，你绑定＃data元素上的keypress当然不会触发。尝试将事件绑定到文档而不是textarea。

Answer 3

有一个自动对焦html5标签（布尔值，无需值）会自动将焦点放在它设置的任何输入/文本区域上：http://www.html5tutorial.info/html5-autofocus.php

这里有很多js后备代码：http://sampsonblog.com/tag/html5

想象一下，如果js可用，自动对焦在表格输入交叉浏览器兼容，如果js不可用HTML5启用的浏览器仍然显示自动对焦..现在你唯一缺少的是'按一个键'到自动对焦，如果你肯定需要这个功能，所以你需要使用回车键触发上面的代码，看起来更优雅只是为了执行自动对焦，虽然我知道它让使用禁用的用户不能控制他们的光标在页面上的位置所以一键从这个角度来看，执行可能会更好，但是有一种方法可以禁用自动聚焦属性，如果它让禁用的用户很难导航，那么就不用担心太多了。

对于html5正在讨论accesskey属性，它被删除但是再次被占用，这将是使用密钥将焦点放在表单元素上的最佳方式，但正如我所说，它正在讨论中并且可以再次被删除： http://lists.w3.org/Archives/Public/public-html-a11y/2010Jul/0103.html

输入空并专注于textarea

3 个答案: