【问题标题】:Javascript to allow only one textbox to contain a valueJavascript 只允许一个文本框包含一个值
【发布时间】:2012-02-15 00:35:17
【问题描述】:

我有 2 个可选的文本框,只有 1 个可以包含数据。我需要它在输入内容时动态启用/禁用另一个文本框。默认情况下,它们都应该启用,但是当在另一个中输入某些内容时应该禁用它们。我使用下面的代码进行了此操作,但现在似乎没有这样做。它基本上每半秒检查一次以查看是否输入了值。

setInterval(function(){
if ($("input[name=audioUri]").val().length != 0) {
    $("input[name=videoUri]").attr("disabled", "disabled");
    $("input[name=audioUri]").attr("disabled", "");
} else if ($("input[name=videoUri]").val().length != 0) {
    $("input[name=audioUri]").attr("disabled", "disabled");
    $("input[name=videoUri]").attr("disabled", "");
} else {
    $("input[name=videoUri]").attr("disabled", "");
    $("input[name=audioUri]").attr("disabled", "");     
}} , 500);

它会在页面加载时检查文本框中是否已经存在值并确定从那里执行的操作,但是当我第一次加载页面时,这两个框都被禁用了。几乎就像他们认为文本框中已经有一些东西一样。当我检查框的值时,它是空字符串“”,也许我应该检查 .val() != ""?

我认为可能有更好的方法来处理它而不需要 setInterval 函数。有什么想法吗?

更新: http://jsfiddle.net/7mKzy/1/

【问题讨论】:

  • 都是很好的答案,我使用了其中一些的位。更新了 JSfiddle 示例。

标签: javascript jquery textbox


【解决方案1】:

您可以在文本框中使用事件 .change()。所以每次你的文本框都有变化。您调用一个函数来启用或禁用另一个文本框。

$("#IdTextbox").change(function () {
        yourFunction();
    });

检查您的文本框是否有一些数据使用:

if ($('#txt').val() != "") {
           doSomething();
}

【讨论】:

    【解决方案2】:

    是的,您可以尝试keyupkeypress,这将在用户开始输入文本时触发。

    【讨论】:

      【解决方案3】:

      让两者都启用,不要使用设置间隔。 使用文本框上的参数onChangekeyupkeypress 调用一个函数来验证盒子上是否有新的东西,并执行启用/禁用。

      【讨论】:

        【解决方案4】:

        keydown() 上执行并使用prop()

        $('input[name=audioUri]').keydown(function(){
            if (!$(this).val()) {  
                $('input[name=videoUri]').prop("disabled", true); 
            }
        });
        

        要检查负载,只需在准备好的 DOM 上进行:

        $(function(){
            if (!$('input[name=audioUri]').val()) {  
                $('input[name=videoUri]').prop("disabled", true); 
            }
        });
        

        你可能应该写一个函数来让它保持干燥。

        【讨论】:

        • 不知道prop函数,我喜欢!
        猜你喜欢
        • 2019-08-13
        • 2015-06-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-10-17
        相关资源
        最近更新 更多