键入一个textarea，同时阻止另​​一个

Question

我已经看过几个例子，我可以用jquery检测是否有人在textarea中输入。但是，我没有找到解决问题的正确方法。

我有两个textareas，当我写一个时，我想阻止其他t​​extarea，所以用户无法访问它。但是，如果用户另外决定并删除文本，我希望两个textareas再次可供用户访问。

是否有任何提示或引导可以帮助我用jquery解决这个问题？

Answer 1

您可以使用以下内容：

<textarea id="txtArea1"></textarea>
<textarea id="txtArea2"></textarea>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>    
    //Onkeyup listener
    $(document).on('keyup','#txtArea1,#txtArea2',function()
    {
        //If value is empty then enable both
        if($(this).val() == "")
        {
            $('#txtArea1').removeAttr('disabled');
            $('#txtArea2').removeAttr('disabled');
        }
        //If txtArea1 then disable txtArea2
        else if($(this).attr('id') == 'txtArea1')
        {
            $('#txtArea2').attr('disabled','disabled');
        }
        //If txtArea2 then disable txtArea1
        else if($(this).attr('id') == 'txtArea2')
        {
            $('#txtArea1').attr('disabled','disabled');
        }
    });
</script>

Answer 2

您可以尝试使用keyup事件和attr方法的组合。这是一个简单的引用代码，可以完成您所要求的类似代码。

HTML

<textarea id="text1" cols="30" rows="10"></textarea>
<textarea id="text2" cols="30" rows="10"></textarea>

jQuery

$(function(){
    $('#text1').keyup(function() {
        if($(this).val().length>0){
            $('#text2').attr('disabled', 'disabled');

        } else if($(this).val().length == 0) {
            $('#text2').attr('disabled', false);
        }
    });

    $('#text2').keyup(function() {
        if($(this).val().length>0){
            $('#text1').attr('disabled', 'disabled');

        } else if($(this).val().length == 0) {
            $('#text1').attr('disabled', false);
        }        
    });
});

以下是action on jsfiddle

中的代码