IE 11带焦点选择,单击后焦点丢失
IE 11 Select with Focus Losing Focus When Clicked
我正在制作一个电子表格,双击一个单元格会弹出'edit'控件,给它焦点,并设置一个onblur事件处理程序来隐藏'edit'控件,并将单元格的值设置为一旦失去焦点的控件的值。假定的流程是用户双击打开编辑控件,选择/输入一个值,然后单击/选项卡到其他内容,从而将焦点移动到另一个元素并触发编辑控件的onblur处理程序。
它工作得很好,除了在IE 10和11中的SELECT标签(Chrome和FF工作得很好):每次我点击carat以放下下拉菜单,SELECT失去焦点并触发onblur处理程序,然后隐藏编辑控件,从而阻止我编辑值。
有人知道为什么会发生这种情况或如何修复它吗?
我找到了这篇博客文章,它描述了这个问题,并提出了一个在SELECT中添加背景图像的解决方案,但这似乎并没有解决问题(或者我做错了)。
下面是生成编辑控件的HTML并将其插入单元格的代码。
/**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()之外什么都不做。一旦事件停止传播到包含的表单元格,一切都正常工作。
不要直接调用focus,使用settimeout()调用它,间隔1到10毫秒应该就足够了。
相关文章:
- 单击时将焦点更改为元素
- 在没有焦点的情况下捕获画布上的第一次单击事件
- 单击其他元素或鼠标向上时隐藏输入框,但保留一次焦点
- 强制单击空链接以不移动页面焦点
- 如何在单击按钮时获得最后一个焦点文本框输入
- 移除焦点并单击event-Jquery
- 按下esc键或随机单击鼠标时,Jcrop失去焦点
- 任何防止在从 tinymce 容器中单击输入文本时失去焦点的方法
- DIV 在单击其中的元素时失去焦点
- 单击在焦点丢失之前注册的位置,但在焦点丢失后运行事件
- 如何处理单击和焦点事件以切换 .
- 如果单击焦点元素的子元素,则会在获得焦点的父元素上触发模糊事件
- 如何通过单击按钮自动打开子窗口作为焦点窗口(IE)
- CKEditor在焦点/单击时更改配置设置
- 当焦点位于文本框中时,单击上的 Jquery 不起作用
- Hammer.js 在单击叠加层并将其删除时,将焦点设置在叠加层下方的输入上
- 对焦点和单击事件的验证
- 让窗口在一次单击触发两个页面重定向后保持焦点
- 使用javascript / jquery更改元素焦点(单击)上的输入/文本区域样式表
- 无法将表单输入字段上的 JQuery UI 工具提示限制为仅在单击/焦点事件上显示