时间戳

首页 > 解决方案 > 通过 onkeypress 函数在 JavaScript 中显示元素

javascript - 通过 onkeypress 函数在 JavaScript 中显示元素

问题描述

我试图仅在输入获得值时才显示保存按钮，

问题是，如果我append为每个输入使用1打印按钮，我正在寻找的是无论输入长度如何，都只获得一次按钮。

重要的是输入不是空的。

代码

<input class="text_dec form-control" type="text" onkeypress="myFunction()" name="text_dec[]" id="'+ textFieldsCount.toString() +'">

function myFunction() {
    $('#moreless').append("button here");
}

任何想法？

标签： javascript

解决方案

而不是keypress, 使用keyup，这将在释放键时调用侦听器，因此您将获得正确length的输入值。这样，您可以检查按钮是否必须显示。

此外，我还会进行另一项检查，以确保输入具有某些值，以便在单击时保存。

像下面这样，看看：

$(function(){
    $('.myInput').on('keyup', function(){
        var btnElem = $('.myButton');
        var charLength = this.value.length;
        if (charLength > 0){
          btnElem.show();
        }else {
          btnElem.hide();
        }
    });
    
    $(".myButton").on("click", function(){
      if ($('.myInput').val().trim().length < 1){
        alert("Input is empty")
        return;
      }
      //Do your code
    });
    
});
.myButton {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <input class="myInput"  type="text" value=""> 
    <input class="myButton" type="button" value="Save Button" />
</body>

现在编辑
，如果你真的需要像以前那样做（我不认为这是一个最佳实践，并且如果你真的想通过这个也建议你重新考虑）这里有一个可以帮助你的代码。点击显示。
在这里，我添加了函数并创建了按钮元素（如果需要），然后仅在输入具有某个值长度时将其附加到 DOM。

function myFunction(input){
   var btnElem = $(".mySaveButton")[0];
   
   if (!btnElem){
      btnElem = document.createElement("button");
      btnElem.textContent = "Save Button";
      btnElem.onclick = btnClicked;
      btnElem.className = "mySaveButton";
   }

    var charLength = input.value.length;
    if (charLength > 0){
      document.body.append(btnElem);
    }else {
      btnElem.remove();
    }
};

function btnClicked(){
  if ($('.myInput').val().trim().length < 1){
    alert("Input is empty")
    return;
  }
  //Do your code
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <input class="myInput"  type="text" value="" onkeyup="myFunction(this)"> 
</body>

推荐阅读