Question

我试图找到一种方法，通过单击按钮或按“Enter”从我的HTML（razorview）接受值。我想做的是

仅当两个字段都已填满时才启用发送按钮，否则应禁用它。
按“Enter”键发送值。但是，只有填写了两个字段时才会发生这种情况。

我的初始（失败）尝试看起来有点像：

< script src = "~/Scripts/jquery.signalR-2.2.2.min.js" > < /script> <
  script src = "~/signalr/js" > < /script> <
  script src = "~/Scripts/SignalR.js" > < /script> <
  script type = "text/javascript"
src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" > < /script> <
  script type = "text/javascript" > < /script>
  (function() {

    var myHub = $.connection.myHub;
    $("#textarea").keyup(function() {

      if ($(this).val() != "" && $("textarea").val() != "") {
        console.log("This should not run unless all feilds are full.");
        var text = ($(this).val()).toString();
        text = text.replace(/\s+/g, " ").trim();
        var message = ($("textarea").val()).toString();
        message = message.replace(/\s+/g, " ").trim();
        $('input[type="button"]').removeAttr('disabled');
      } else {
        $("#send").attr('disabled', 'disabled');

      }
    });

    $('#yourMessage, fname').keyup(function(e) {
      if ($("#yourMessage").val() != "" && $("#fname").val() != "") {
        if (e.which == 13) { //Enter key pressed
          $('#send').trigger('click'); //Trigger search button click event
        }
      }
    });
  })();

.button {
  text-decoration: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  outline: 0;
  display: inline-block;
  margin-right: 2px;
  border-radius: 12px;
  background-color: blue;
  opacity: 1;
}

.button-blue {
  background-color: #3498db;
}

.button-blue:hover {
  background-color: #3498db;
}

.button-blue:active {
  color: #3498db;
  background-color: #3498db;
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}

.button:disabled {
  opacity: 0.6;
  pointer-events: none;
}

<h1>Hello!</h1>
<form action="" method="post" id="subscribe" name="subscribe">
  First name: <input type="text" name="fname" id="fname" placeholder="Name" required autofocus><br>
  <div id="message"></div>
  Your Message:<br>
  <textarea typeof="text" id="yourMessage" placeholder="Start Typing..." required></textarea><br />
  <input type="button" class="button button-blue" value="Send" name="button" disabled="disabled" id="send" />
</form>
<input type="button" class="button button-blue" value="Click Me!" id="click-me" />

Answer 1

答案是你必须绑定所有不同的案例。以下是您正在寻找的工作方式：https://jsfiddle.net/4z5zgqbn/

$(document).ready(function() {
  $("#send").prop("disabled", true);

  $("#yourMessage").on("keyup", function() {
    if ($(this).val() != "" && $("#fname").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });
  $("#fname").on("keyup", function() {
    if ($(this).val() != "" && $("#yourMessage").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });

  $("#yourMessage, #fname").on("keyup", function(e) {
    if (e.which == 13 && $("#fname").val() != "" && $("#yourMessage").val() != "") {
      $("#send").click();
    }
  })

  $("#send").on("click", function() {
    alert("send message");
  })
})

Answer 2

至1：多数民众赞成我所做的：为所有输入提供一个相同的类名（.classname），

<h4>Angular-xeditable Editable row (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
   <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold">
      <td style="width:35%">Name</td>
      <td style="width:20%">Status</td>
      <td style="width:20%">Group</td>
      <td style="width:25%">Edit</td>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name" e-form="rowform" e-ng-hide="true" onbeforesave="checkName($data, user.id)" e-required>
        <span ng-hide="false">hello</span>
          {{ user.name || 'empty' }}
        </span>
      </td>
      <td>
        <!-- editable status (select-local) -->
        <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
          {{ showStatus(user) }}
        </span>
      </td>
      <td>
        <!-- editable group (select-remote) -->
        <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
          {{ showGroup(user) }}
        </span>
      </td>
      <td style="white-space: nowrap">
        <!-- form -->
        <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform.$visible">
          <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
          <button class="btn btn-danger" ng-click="removeUser($index)">del</button>
        </div>  
      </td>
    </tr>
  </table>

  <button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

到2：

{{1}}

}）;

没有测试它。

如果所有字段都填满，如何接受值或启用按钮？

2 个答案: