Question

我的输入框使用占位符文本和jquery来确保它在我添加文本（即不是占位符文本）之前不会触发。我想用文本区域替换输入框但无法使jquery工作。使用下面的textarea，无论我是否输入文本区域，都会触发提交按钮。

<div class="RepForm-loggedin" >
  <form name="RepForm" method="POST" action="<?php echo $this->newReply;?>">
    <table name="RepFormTable" style="width:100%">
      <tr>
        <td style="width:100%">

    //CURRENT INPUT BOX
        <input type="text" rows="8"  id="repContent" class="inputbox inputbox-title placeholder-soc-med" name="repContent" placeholder="Ask a question . . ."/>

    //DESIRED REPLACEMENT TEXT AREA
        <textarea type="text" rows="8"  style="max-width:600px; width:100%" id="repContent" class="inputbox inputbox-title placeholder-soc-med" name="repContent" placeholder="Ask a question . . ."></textarea>

        </td>
       </tr>
       <tr>
         <td style = "text-align:right;">
             <input type="submit" value="Submit" id="sendComment" class="dgrey-button">
         </td>
       </tr>
    </table>
  </form>
</div>

<script type="text/javascript">
        $(document).ready(function(){
            $('#sendComment').attr('disabled',true);
            $('#repContent').keyup(function(){
                if($(this).val().length !=0)
                    $('#sendComment').attr('disabled', false);
                else
                    $('#sendComment').attr('disabled',true);
            })
        });
    </script>

Answer 1

您已复制id="repContent"。

您的输入框也有此ID。因此，当您使用$('#repContent')选择元素时，它会返回您的输入字段。

只需从<input />中移除此属性，您的代码即可使用。

工作小提琴：https://jsfiddle.net/mrlew/7o493syd/1/

<小时/> 您可能会问：为什么$('#id')没有选择具有此ID的所有元素？

首先，文档中只能有一个具有相同ID的元素。来自HTML specification：

id = 此属性为元素指定名称。该名称在文档中必须是唯一的。

然后，当你使用jQuery选择id时，它将只返回第一个匹配（因为它在内部使用document.getElementById()）。来自docs：

每个id值只能在文档中使用一次。如果超过一个元素已分配相同的ID，使用该ID的查询只会选择DOM中第一个匹配的元素。这种行为但是，不应该依赖;包含多个文档的文档使用相同ID的元素无效。

没有文本，Jquery会阻止输入框触发但不会阻止textarea触发器

1 个答案: