jQuery UI：当文本框可选时如何保持文本框可编辑（）

Question

我在table 中有一个input type="text"。 https://jsfiddle.net/L0vx0hck/

$('#myGrid').selectable({
  filter: ".dataItemColumn,.dataText",
  cancel: null,
  distance: 10
});

td {
  padding: 5px;
  border: 1px solid black
}

.ui-selected {
  background-color: lightblue

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myGrid">
  <tr>
    <td class="dataItemColumn">
      <input class="dataText" type="text" value="focusable" onclick="this.focus()" />
    </td>
    <td class="dataItemColumn">
      <input type="text" class="dataText" value="aa" />
    </td>
  </tr>
  <tr>
    <td class="dataItemColumn">
      <input type="text" value="focusable" onclick="this.focus()" />
    </td>
    <td class="dataItemColumn">
      <input type="text" value="aa" />
    </td>
  </tr>
</table>
<input type="text" value="test" />

<table id="myGrid">
      <tr>
        <td class="dataItemColumn">
          <input type="text" class="dataText" value="aa" />
        </td>
      </tr>

我让它可以选择

$('#myGrid').selectable({
  filter: ".dataItemColumn,.dataText",
  cancel: null,
  distance: 10
});

在此之后，无法单击input 开始编辑。作为部分解决方法，我在input 上设置onclick="this.focus()"。也可以省略cancel: null。第一个选项允许仅在请求文本时开始编辑，并且不允许选择部分文本。另一个选项提供完整的编辑功能，但不允许通过拖动文本框来开始选择。

所以我需要什么：

• 能够通过拖动选择文本框（或其容器td） 即使在文本框上开始拖动
• 能够通过以下方式开始编辑 点击文本框的任意位置

用鼠标选择文本的一部分也很有用，但不是必需的。

Answer 1

问题在于大多数 jquery-ui 小部件具有相同的 mouseDown 处理程序，该处理程序具有 preventDefault() 命令。虽然这对于大多数小部件来说都可以，但确实可以稍后激活 selectable。

您可以为 selectable 覆盖鼠标事件并设置更多条件。根据您的要求，您有以下两个条件：

• 如果 mousedown 在输入元素上，默认不应该是 防止。
• 如果鼠标拖动只发生在输入上，可选择的 不应触发拖动事件。

这样的事情应该会给你一些想法：

$.ui.selectable.prototype._mouseMove = function(event) {

    ...
    // you add the target vs mousedown selection condition here.
    // Baiscally if the mousedrag target is the same as mouse down target
    // And the target was an input, then you dont run mouseStart()
    if (this._mouseDistanceMet(event) && this._mouseDelayMet(event) && (this._selection !== event.target || !this._targetIsInput)) {
        this._mouseStarted =
        (this._mouseStart(this._mouseDownEvent, event) !== false);
        (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
    }
    ...

}

$.ui.selectable.prototype._mouseDown = function(event) {

    ....

    this._selection = event.target;
    this._targetIsInput = event.target.tagName === 'INPUT';
    if(!this._targetIsInput){
        event.preventDefault();
    }
    ...
}

https://jsfiddle.net/z1rjnspt/2/

为了简化，我在此处省略了 mouseHandled，但您也可以处理它。

显然这改变了很多可选择的，所以如果你有一个有限的设置它可能会工作，但如果你想让它更安全，你应该创建一个新的小部件。