除非达到文本区域的最小长度，否则禁用按钮 - Javascript

Question

我有一个文本区域和一个按钮，我想在文本区域达到最小长度之前禁用按钮。

我想到了类似于这段代码的东西：

$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
    var textarea_value = $("#texta").val();
 
    if(textarea_value != '') {
        $('input[type="submit"]').attr('disabled' , false);
    }else{
        $('input[type="submit"]').attr('disabled' , true);
    }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea maxlength="20" minlength="5" rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />

我尝试将 .val 更改为 .minlength 并像这样测试它：

 if(textarea_value < '5') {    
    $('input[type="submit"]').attr('disabled' , false);
 }else{
     $('input[type="submit"]').attr('disabled' , true);
 }

但是没有用。

有人知道如何检查是否达到文本区域的最小长度吗？使用纯 javascript 或 jquery ?

Answer 1

要使用 jQuery 从 HTML 元素获取某个属性，您可以使用 .attr() 方法：

Gets the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

参考：api.jquery.com/attr.

代码如下：

$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);

$('textarea').on('keyup',function()
{
    var textarea_val = $("#texta").val();
 
    var minLength = $("#texta").attr( 'minlength' );
 
    if(textarea_val != '' && textarea_val.length >= minLength)
    {
        $('input[type="submit"]').attr('disabled' , false);
    }
    else
    {
        $('input[type="submit"]').attr('disabled' , true);
    }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea maxlength="20" minlength="5" rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />

Answer 2

我自己找到了答案，有点不同，意思是它不检查最小长度，它检查写入的单词。

这是 FiddleJS

代码应该是自解释的。

$('input[type="submit"]').attr('disabled', true);
    $('input[type="text"],textarea').on('keyup',function() {
    s = document.getElementById("texta").value;
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    if (s.split(' ').length >= 3) {
        $('input[type="submit"]').attr('disabled' , false);
    }
    else{
        $('input[type="submit"]').attr('disabled' , true);
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea maxlength="20" minlength="5" rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />

除非达到文本区域的最小长度，否则禁用按钮 - Javascript

Disable button unless min-length of textarea is reached - Javascript

html

javascript

textarea