Textarea 不能与 jQuery 实时键控功能一起使用

Posted 2023-05-09

【中文标题】Textarea 不能与 jQuery 实时键控功能一起使用

【英文标题】：Textarea not working with jQuery live keyup function

【发布时间】：2013-06-05 13:29:55

【问题描述】：

我正在尝试为个人项目构建标签好友系统。我在网上找到了一些很棒的教程，但现在我卡住了。

当我在标签框中输入@ 时没有任何反应。 Display 和 msgbox 应该向下滑动，以便用户可以选择他们想要标记的朋友。

我做错了什么？

<div id="tagbox">
    <div class="textarea">
        <textarea id="contentbox" name="contentbox"></textarea>
        <div id='display'></div>
        <div id="msgbox"></div>
        <button type="submit" id="tag_button" value="Update" name="submit">Add</button>
    </div>

这里是 AJAX/jQuery 部分：

<script type="text/javascript">
    $(document).ready(function() 
        var start=/@/ig;
        var word=/@(\w+)/ig;

        $('#tagbox .textarea textarea[name="contentbox"]').live("keyup",function() 
            var content=$(this).text();
            var go= content.match(start);
            var name= content.match(word);
            var dataString = 'searchword='+ name;

            if(go.length>0) 
                $("#msgbox").slideDown('show');
                $("#display").slideUp('show');
                $("#msgbox").html("Type the name of someone or something...");
                if(name.length>0) 
                    $.ajax(
                        type: "POST",
                        url: "addfriends.php",
                        data: dataString,
                        cache: false,
                        success: function(html) 
                            $("#msgbox").hide();
                            $("#display").html(html).show();
                        
                    );
                
            
            return false();
        );

        $(".addname").live("click",function() 
            var username=$(this).attr('title');
            var old=$('#tagbox .textarea textarea[name="contentbox"]').html();
            var content=old.replace(word,""); 
            $('#ws3 .textarea textarea[name="contentbox"]').html(content);
            var E="<a class='red' contenteditable='false' href='#' >"+username+"</a>";
            $('#tagbox').append(E);
            $("#display").hide();
            $("#msgbox").hide();
            $('#ws3').focus();
        );
    );
</script>

【问题讨论】：

.live 已弃用。您应该使用.on 或.delegate。

为什么不用$('#contentbox') 而不是$('#tagbox .textarea textarea[name="contentbox"]') .. ID 在页面上应该是唯一的

【参考方案1】：

要获取textarea 的值，您必须使用方法.val() 而不是text()，否则content 将始终为空。

var content=$(this).val();

【讨论】：

天哪，这让我发疯了！我不明白为什么 textarea 上的 keyup 总是显示原始值。我使用的是 jQuery(this).text() 而不是 jQuery(this).val()