在textarea字段中键入时显示提交按钮

时间:2014-04-29 20:46:51

标签: javascript jquery

我有一个文本区域字段和一个始终可见的表单上的提交按钮。我们要求仅在用户开始键入文本区域字段并且包含值时才显示提交按钮。 这样用户就无法提交空表单。任何人都可以为此任务建议一些JavaScript / JQuery代码吗?

4 个答案:

答案 0 :(得分:1)

设置已禁用

$("input[type=submit]").attr("disabled", "disabled");

改变

$( ".target" ).change(function() {
    var validated = true;
    if($('#nome').val().length === 0) validated = false;   
    if(validated) $("input[type=submit]").removeAttr("disabled");
});

答案 1 :(得分:0)

$('input[type=submit]').hide();

function checkValue(element){
    if($(element).val() !=== '') {
         $('input[type=submit]').show();
    } else {
         $('input[type=submit]').hide();
    }
}

$('input[type=text]).on('keyup', function() {
    checkValue(this);
});

答案 2 :(得分:0)

应该非常简单,只需隐藏按钮并使用keyup事件处理程序在textarea具有值时再次显示它

$('#button').hide();

$('#textarea').on('keyup', function() {
    if (this.value.length) {
        $('#button').show();
    }else{
        $('#button').hide();
    }
});

FIDDLE

修改

或根据要求,没有jQuery

var button  = document.getElementById('button'),
    txtarea = document.getElementById('textarea');

button.style.display = 'none';

txtarea.addEventListener('keyup', function() {
    if (this.value.length) {
        button.style.display = 'block';
    }else{
        button.style.display = 'none';
    }
}, false);

FIDDLE

答案 3 :(得分:0)

这样的事情:

HTML:

<textarea id="ta"></textarea>
<button id="btn" onclick="alert('submit');" style="display:none">Btn</button>

JS:

$('#ta').keyup(function(){       
    if($(this).val() != '')
    {
        $('#btn').show();
    }
    else
    {
        $('#btn').hide();
    }
});

Fiddle Example