IE 11选择时单击时失去焦点 [英] IE 11 Select with Focus Losing Focus When Clicked

问题描述

我正在制作一个电子表格，双击单元格将显示编辑"控件，使其具有焦点，并设置一个onblur事件处理程序以隐藏编辑"控件并将该单元格的值设置为一旦失去焦点，它就会变成控件的控件.假定的流程是用户双击以调出编辑控件，选择/输入一个值，然后单击/制表符到其他内容，从而将焦点移到另一个元素上并触发编辑控件的onblur处理程序.

I'm making a spreadsheet where double-clicking a cell brings up the 'edit' control, gives it focus, and sets up an onblur event handler to hide the 'edit' control and set the value of the cell to be that of the control once it loses focus. The assumed flow is the user double-clicks to bring up the edit control, selects/enters a value, then clicks/tabs to something else, thus moving focus to another element and triggering the edit control's onblur handler.

除了IE 10和11中的SELECT标记(Chrome和FF可以正常使用)之外，它的工作原理都很好:每次单击克拉以放置下拉菜单时，SELECT都会失去焦点并触发onb​​lur处理程序，然后隐藏编辑控件，从而阻止我编辑值.

It works just fine, except with SELECT tags in IE 10 and 11 (Chrome and FF work fine): Every time I click on the carat to drop the drop-down, the SELECT loses focus and triggers the onblur handler, which then hides the edit control, thus preventing me from editing a value.

有人知道为什么会这样或如何解决吗?

Does anyone know why this is happening or how to fix it?

我发现了此博客文章其中描述了问题，并提出了将背景图像添加到SELECT的解决方案，但这似乎并不能解决问题(或者我做错了).

I found this blog post which describes the problem and proposes a solution of adding a background image to the SELECT, but that didn't seem to fix the problem (or I did it wrong).

下面是我生成并将编辑控件的HTML插入单元格中的代码.

Below is the code where I generate and insert the HTML for the edit control into the cell.

/**Changes the contents of the cell to be its editing control instead of plain text.
@method SetCellEditMode
@param {String} mappingId: The Id of the PropertyMapping representing cell to switch over to edit mode.*/
this.SetCellEditMode = function (mappingId)
{
    if (this.Editing === true) return false;

    var cell = this.GetCell(mappingId);
    var tagType = null;
    if (cell == null) return false;
    var propInfo = cell.SourceObject.PropertyInfo;

    if (propInfo.IsReadOnly === true) return false;

    var innerHtml = null;
    if (propInfo.PropertyType === SDCMS.Resources.PropertyType.Boolean)
    {
        innerHtml = makeBoolHTML(cell.SourceObject);
    }
    else if (propInfo.PropertyType === SDCMS.Resources.PropertyType.Enum)
    {
        innerHtml = makeEnumHTML(cell.SourceObject);
    }
    else if (propInfo.PropertyType === SDCMS.Resources.PropertyType.Number || propInfo.PropertyType === SDCMS.Resources.PropertyType.String)
    {
        innerHtml = makeStringEntryHTML(cell.SourceObject);
    }

    cell.Node[0].innerText = "";
    cell.Node.html(innerHtml);
    cell.Node[0].firstChild.focus();
    this.Editing = true;
    return true;
};



/**Makes the HTML for a boolean <select> control.
@method makeBoolHTML
@param {Object} propertyMapping: The SDCMS.Resources.PropertyMapping for which we are making an <select> control.*/
var makeBoolHTML = function (propertyMapping)
{
    if (propertyMapping == null) return null;
    var innerHtml = "<select mappingId=\"" + propertyMapping.Id + "\" onblur=\"SD_Click(event, 'SD_ChangeValue')\">" +
                        "<option>true</option>" +
                        "<option>false</option>" +
                    "</select>";

    if (propertyMapping.PropertyValue === true)
    {
        innerHtml.replace("<option>true</option>", "<option selected=\"selected\">true</option>")
    }
    else
    {
        innerHtml.replace("<option>false</option>", "<option selected=\"selected\">false</option>")
    }

    return innerHtml;
};

推荐答案

找到了解决方案.事实证明，所有输入/选择类型的节点都失去了焦点，而发生的事情是，当单击表中的节点时，会将事件从控件冒泡到表单元格，然后该事件将获得焦点并导致blur()在内部控件上触发. 解决方案是为onclick，onmousedown和onmouseup连接事件处理程序(很好的措施)，这些事件处理程序除了preventDefault()和stopPropagation()之外什么也没做.一旦事件停止传播到包含表的单元格，一切都按预期进行.

Found a solution. Turns out it was all input/select type nodes were losing focus, and what was happening was that the nodes that were in a table would, when clicked, bubble the event from the control to the table cell, which would then get focus and cause blur() to trigger on the internal control. The solution was to hook up event handlers for onclick, onmousedown, and onmouseup (for good measure) that do nothing but preventDefault() and stopPropagation(). Once the event stopped propagating to the containing table cell, everything worked as it should.

这篇关于IE 11选择时单击时失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！