Question

我遇到了一些困难。任务是在输入昵称与占位符相同后启用播放按钮（例如，我将占位符设置为连接，只有当我在表单中输入连接时才会启用该按钮。

以下代码是我的HTML和Javascript代码。它不起作用。所以我想找出问题所在。

HTML：

<p> <input id= "play" class="button" disabled="disabled" type="submit" value="play" onkeyup="myFunction()
onclick="play()"> </p>

使用Javascript：

function myFunction() {
var x = document.getElementById('name').value;
document.addEventListener('keydown',function(e) {
name.textcontent = 'keydown:' + e.keycode;
});

document.addEventListener('keyup', function(e) {
name.textContent = 'keyup:' +e.keyCode; 
});

if (name == 'Lianzheng') {
alert("!!");
document.getElementById("name").disabled = false;
}
else {
document.getElementById("name").disabled = true;
}

Answer 1

试试这种方式。你必须在inputText上放置onKeyUp函数而不是在Button中。

<html>
<head>
    <script type="text/javascript">
        function myFunction() {
            var name = document.getElementById("name").value;

            if (name === 'Lianzheng') {
                alert("!!");
                document.getElementById("play").disabled = false;
            }
            else {
                document.getElementById("play").disabled = true;
            }
        }
    </script>
</head>
<body>
    <input type="text" id="name" onkeyup="myFunction()"/><br/>
    <input id="play" class="button" disabled type="submit" value="play" /> 
</body>

但无论如何，最好只在点击按钮后检查名称。并在javascript中检查名称，如果名称正确则提交，如果不返回false。通过这种方式，您可以避免不必要的提示。

Answer 2

我无法发表评论，我是新成员，所以这可能不是答案，更多的是建议实际上...... 啊，我无法看到这个名字的来源，但是你要检查你的名称是否有价值，警报是否有效？您也可以尝试在if语句之前和之后设置警报，仅用于检查。然后，如果它有价值，但仍然不起作用，你可以使用 .show（）或 .hide（）？而不是 .disabled = true 和 .disabled = false ？希望它有所帮助。

Answer 3

我认为您正在尝试启用/禁用文本字段而不是按钮。

重写您的代码，以包含您启用/禁用按钮的按钮的ID。

请参阅下文。

function myFunction() {
var x = document.getElementById('name').value;
document.addEventListener('keydown',function(e) {
name.textcontent = 'keydown:' + e.keycode;
});

document.addEventListener('keyup', function(e) {
name.textContent = 'keyup:' +e.keyCode; 
});

if (name == 'Lianzheng') {
alert("!!");
document.getElementById("play").disabled = false;
}
else {
document.getElementById("play").disabled = true;
}

另外，请将变量name替换为document.getElementById("ID_OF_YOUR_TEXTBOX_HERE").value

Answer 4

试试这个：

<script>

function test(){ 
     var placeHolderName = document.getElementById("playText").placeholder;
     var playTxt = document.getElementById("playText").value;

     console.log("playTxt="+ playTxt);
     console.log("disable ="+ document.getElementById("play").disabled);

    if(playTxt === placeHolderName){
       document.getElementById("play").disabled = false;
       alert('done!');
    } 
}

</script>    

<input id="playText" type="text" placeHolder ="abcd" onkeyup="test();" />
<input id= "play" class="button" disabled="disabled" type="submit" value="play">

根据你提供的线索，这应该有用。通过这种方式，您可以在以后更改placeHolder值。我为你做了一个小提琴：Fiddle

**将“abcd”值替换为您需要的任何名称！

Answer 5

<!DOCTYPE html>
<html>
    <form>
    <input type= "text" placeholder="Lianzheng" id= "inputField" onkeyup="myFunction()" onkeydown="myFunction()">
    <input type="submit" name="play" disabled="disabled" id="play" value="play">

    </form>
    <script>
        function myFunction() {
          var placeholderValue = document.getElementById("inputField").placeholder;
          var valueEntered = document.getElementById("inputField").value;
          if(placeholderValue === valueEntered){
            document.getElementById("play").removeAttribute("disabled");
          }
          else{
            if(!document.getElementById("play").hasAttribute("disabled")){
                   document.getElementById("play").setAttribute("disabled","disabled")
            }

          }

        }
        setInterval(function(){
           var placeholderValue = document.getElementById("inputField").placeholder;
          var valueEntered = document.getElementById("inputField").value;
          if(placeholderValue === valueEntered){
            document.getElementById("play").removeAttribute("disabled");
          }
          else{
            if(!document.getElementById("play").hasAttribute("disabled")){
                   document.getElementById("play").setAttribute("disabled","disabled")
            }

          }
        },1000);
    </script>
</html>

输入昵称后启用按钮

5 个答案: