问题

Question

我想确保输入在提交之前具有值，但是当我使用“”或'null'时，null不会禁用它，而“”将使其保持禁用状态。这是我的代码：

var prevScrollpos = window.pageYOffset;
$(window).scroll(function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    $("#container").fadeIn();
  } else {
    $("#container").fadeOut();
  }
  prevScrollpos = currentScrollPos;

});
if (document.getElementById("m").value === null) {
  document.getElementById("send").disabled = true;
} else if (document.getElementById("m").value !== null) {
  document.getElementById("send").disabled = false;
} else {
  $(function() {
    var socket = io();
    $('form').submit(function() {
      socket.emit('chat message', $('#m').val());
      $("#m").val("");
      return false;
    });
    socket.on('chat message', function(msg) {
      $('#messages').append($('<li>').text(msg));

    });
  });
}

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<div id="msgs">
  <ul id="messages"></ul>
</div>
<form action="">
  <div id="container">
    <input id="m" autocomplete="off" /><button id="send">Send</button>
  </div>
</form>

谢谢！

Answer 1

您可以考虑在HTML5中使用新的required属性：

<input id="m" autocomplete="off" required/>

有关更多信息：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#The_required_attribute

这个答案就像表单数据验证的另一种方法一样，因为从基本到高级，我们都有多种方法来实现表单数据验证。

Answer 2

我认为不需要是一种好方法，因为我可以通过查看html代码轻松地将其禁用。

因此，您应该做的是添加一个事件侦听器。每次用户键入内容时，您都会检查input是否为空。如果是，请禁用该按钮；如果不是，请激活该按钮。

还有：还要始终检查后端！！！

Answer 3

您可以使用值的长度

if (document.getElementById("m").value.length>0) concole.log('input not empty');

Answer 4

我不是Jquery专家，我也不明白为什么仍要使用它，但是您的问题是您没有事件监听器来更改您的元素。这意味着-Javascript记住运行时元素中的值，以后在更改它时，如果没有适当的侦听器，它将无法读取新值。因此，""将使其保持禁用状态。阅读有关change的Jquery监听器的https://api.jquery.com/change/

Answer 5

请使用if（document.getElementById（“ m”）。value ==''）代替您的

 <div id="msgs">
                    <ul id="messages"></ul>
                </div>
                <form action="">
                    <div id="container">
                        <input id="m" autocomplete="off" /><button id="send">Send</button>
                    </div>
                </form>
            </body>
            <script src="/socket.io/socket.io.js"></script>
            <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
            <script>

                var prevScrollpos = window.pageYOffset;
                $(window).scroll(function () {
                    var currentScrollPos = window.pageYOffset;
                    if (prevScrollpos > currentScrollPos) {
                        $("#container").fadeIn();
                    } else {
                        $("#container").fadeOut();
                    }
                    prevScrollpos = currentScrollPos;

                });
    runcheck();  
    $("#m").keyup(function(){
    runcheck();
    });





    function runcheck(){
    if (document.getElementById("m").value == '') {
                    document.getElementById("send").disabled = true;
                }
                else if (document.getElementById("m").value != null) {
                    document.getElementById("send").disabled = false;
                }  else {
                    $(function () {
                        var socket = io();
                        $('form').submit(function () {
                            socket.emit('chat message', $('#m').val());
                            $("#m").val("");
                            return false;
                        });
    socket.on('chat message', function (msg) {
                    $('#messages').append($('<li>').text(msg));

                });

                    });
                }
    }


            </script>

Answer 6

问题

在您的示例代码中，我可以看到几个问题。

好像您没有听众了解输入的变化
- 您需要在html元素上添加一个事件侦听器，以了解是否有任何更改。请参见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener，然后根据您得到的事件，可以使用event.target.value检查该值。
您的值检查不正确
- 您只需if(document.getElementById("m").value)就不需要=== null，即可检查字段是否具有值。

解决方案

只需在html元素上使用required属性。这将添加基本的html表单验证，并在输入为空时阻止提交。只要是表单元素即可。有关更多信息，请参见MDN Docs on required attribute。

<input id="m" autocomplete="off" required/>

然后切换为禁用状态，您可以在JavaScript中检查其有效性。这是未经测试的伪代码：

const sendButton = document.querySelector('#send');  // grab the button
const mInput = document.querySelector('#m');  // grab the input

sendButton.disabled = true;  // disable it by default

mInput.addEventListener('change', event => {  // as soon as the input value changes
  sendButton.disabled = !event.target.checkValidity();  // set the disabled state based on the validity of the input field (event.target is the input field) (the little exclamation mark before the validity check means "not". !true === false and !false === true
});

请注意，在大多数浏览器中，change侦听器仅在焦点更改为另一个元素时触发。因此，您可能需要检查keyup或类似的内容。在此处查看事件：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener（在“事件”下的左侧菜单中）

PS：通常。查看您的代码。我建议您参加一些有关Web开发的绝对入门课程，尤其是html + css + javascript。我想codecademy是一个不错的起点。

Answer 7

required不是一个好的解决方案，因为您可以在浏览器控制台中将其关闭我建议：

if (document.getElementById("m").value == '') { //code here... }

您可以检查此LINK以获得更多信息

希望这对您有帮助

提交前确保输入字段具有值

7 个答案:

问题

解决方案