Question

我有一个网站，其中包含使用jquery自动保存并使用ajax更新的表单。此表单包含不同类型的输入元素，如textbox，jquery-ui datepicker和timepicker ......

<div id="body">
  <form id="line1">
    <input id="1" type="text"/>
    <input id="2" type="text" class="datepicker"/>
    <input id="3" type="text" class="timepicker"/>
    <select id="4" multiple="multiple>
       <option> 1 </option>
    </select>
  </form>
  <form id="line2">
    <input id="1" type="text"/>
    <input id="2" type="text" class="datepicker"/>
    <input id="3" type="text" class="timepicker"/>
    <select id="4" multiple="multiple">
       <option> 1 </option>
    </select>
  </form>
</div>

现在我需要重新加载body的内容以进行过滤。现在可能发生的是内容被重新加载，而表单仍然接受输入并尝试保存它，但在重新加载后，＃34;消失＆＃34;因为它没有进入新视图。使用指针事件添加覆盖：none无法停止鼠标事件，但仍可以键入。

我已经尝试过的是：

 function disableDiv(event)
 {
    event.stopimmediatepropagation()
 }

 ... 
 this.element.find('.body')[0].addEventListener("keydown", disableDiv, true);

适用于Firefox但不适用于Chrome或IE的接缝

有没有办法阻止键盘事件捕获到每个浏览器的表单？

Answer 1

我不确定我完全理解你的问题。但是，在提交表单时，您是否尝试过将jQuery设置为disabled的所有输入？这样就可以实现在提交表单后不让输入更改的目标。

例如：

jQuery 1.6 +

$("input").prop('disabled', true);

jQuery 1.5及以下

$("input").attr('disabled','disabled');

如果您不熟悉，可以从禁用引导标记输入的方式获得一些想法...... http://getbootstrap.com/css/。

Answer 2

如果您希望无法编辑输入，正确的方法是禁用它们。像这样的东西会这样做：

＆＃13;

$(function() {
  $(".datepicker").datepicker();
  
  $("#disable").click(function() {
    $("#body input").prop( "disabled", true );
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="body">
  <form id="line1">
    <input id="1" type="text"/>
    <input id="2" type="text" class="datepicker"/>
    <input id="3" type="text" class="timepicker"/>
    <select id="4" multiple="multiple>
       <option> 1 </option>
    </select>
  </form>
  <form id="line2">
    <input id="1" type="text"/>
    <input id="2" type="text" class="datepicker"/>
    <input id="3" type="text" class="timepicker"/>
    <select id="4" multiple="multiple">
       <option> 1 </option>
    </select>
  </form>
</div>

<input type="button" value="disable" id="disable"/>

＆＃13;

显然，一旦你完成加载任何你正在加载的东西，你就可以重新启用它们。

试图阻止您可能与控件交互的细节，而不是您希望控件处于什么状态，这样做是错误的。如果有人点击或键入您，您不在乎，您关心的是控件无法编辑。例如，您已停止点击和键盘，但触摸事件呢？或某些浏览器可能实现的任何其他类型的事件以与控件交互。如果您尝试通过仅拦截导致控件执行某些操作的事件来禁用控件，则始终存在您错过某些交互的风险。

防止所有浏览器在div内捕获鼠标和键盘事件

2 个答案: