我正在制作一个电子表格,双击一个单元格会显示“编辑”控件,给它焦点,并设置一个onblur事件处理程序来隐藏'edit'控件并设置单元格的值为一旦它失去焦点,控制的那个。假定的流程是用户双击以调出编辑控件,选择/输入值,然后单击/标签到其他内容,从而将焦点移动到另一个元素并触发编辑控件的onblur处理程序。
它工作正常,除了在IE 10和11中使用SELECT标签(Chrome和FF工作正常):每次我点击克拉以放下下拉菜单时,SELECT失去焦点并触发onblur处理程序,然后隐藏编辑控件,从而阻止我编辑值。
有谁知道为什么会这样或者如何修复它?
我找到this博客文章描述了这个问题并提出了一个向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;
};
答案 0 :(得分:2)
找到解决方案。事实证明,所有输入/选择类型节点都失去了焦点,发生的事情是,表单中的节点在点击时会将事件从控件冒泡到表格单元格,然后这会得到焦点和原因blur()触发内部控件。 解决方案是为onclick,onmousedown和onmouseup(为了好的测量)挂钩事件处理程序,除了preventDefault()和stopPropagation()之外什么都不做。一旦事件停止传播到包含表格单元格,一切都按预期工作。
答案 1 :(得分:0)
使用settimeout()直接调用焦点而不是调用焦点,1到10 ms的间隔就足够了。