关键词：
【中文标题】如何在我的 HTML 自定义元素中接收焦点和选择事件【英文标题】：How can I receive focus and select event in my HTML custom element 【发布时间】：2019-10-19 20:08:16 【问题描述】：我正在构建一个自定义 HTML 元素。
自定义 HTML 元素扩展了表格单元格元素。
我在这个自定义元素中包含了一个输入文本框。
当自定义元素获得焦点或选择事件时，我希望输入文本框获得这些事件。
这是我的代码：
class DateCell extends HTMLTableCellElement
constructor()
super();
this.textBox = document.createElement("input");
this.textBox.type = "text";
this.appendChild(this.textBox);
$(this).addClass("borderCell");
$(this).addClass("dateCell");
focus(e)
this.textBox.focus();
select(e)
this.textBox.select();
set textContent(t)
this.textBox.value = t;
get textContent()
return this.textBox.value ;
set value(v)
this.textBox.value = v;
switch (v)
case "a":
this.textBox.className="aShiftColor";
break;
case "b":
this.textBox.className="bShiftColor";
break;
case "c":
this.textBox.className="cShiftColor";
break;
get value()
return this.textBox.value;
customElements.define('datacell-string',
DateCell,
extends: 'td'
);
$(document).ready(function()
var t = document.createElement("table");
var row = t.insertRow(t.rows);
var cell1 = new DateCell();
var cell2 = new DateCell();
var cell3 = new DateCell();
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
$(cell1).val("a");
cell2.value = "c";
cell2.select();
$(cell3).val("b");
$(cell3).focus();
$(document.body).append(t);
$("td").each(function()
console.log(this.value);
);
);td input[type="text"]
//color:white;
border:none;
//border:1px solid black;
height:100%;
width:100%;
text-align:center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
td input[type="text"]:focus
outline: none;
table
border-spacing: 0;
border-collapse: collapse;
.aShiftColor
background-color:#ff99cc;
.borderCell
border:1px solid #e0e0e0;
.bShiftColor
background-color:#ffffcc;
.cShiftColor
background-color:#ccffcc;
.dateCell
margin:0px;
width:25px;
padding: 0px;
text-align: center;
font-size:17px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>很遗憾，这些输入框都没有被选中或处于焦点位置。
【问题讨论】：
【参考方案1】：经过多次试验，我发现由于所有的DateCells都没有连接到附加到DOM，所以“选择”和“焦点”效果没有显示出来。
因此，我更改了以下代码：
..............
cell2.select();
$(cell3).val("b");
$(cell3).focus();
$(document.body).append(t);
到
..............
$(cell3).val("b");
$(document.body).append(t);
cell2.select();
$(cell3).focus();
，然后就可以了！
【讨论】：
辅助功能 - 如何在元素上设置自定义选项卡焦点顺序
】辅助功能-如何在元素上设置自定义选项卡焦点顺序【英文标题】：Accessibility-Howtosetcustomtabfocusorderonelements【发布时间】：2022-01-0107:50:07【问题描述】：我的用例是一个传统的表单页面。我的页面在右上角包含几个按钮，后面... 查看详情
(flex mobile)如何在我的自定义布局中添加元素
】(flexmobile)如何在我的自定义布局中添加元素【英文标题】：(flexmobile)howtoaddelementinthemycustomlayout【发布时间】：2012-05-0609:48:58【问题描述】：这是我的代码：publicclassmy_LayoutextendsLayoutBasepublicfunctionmy_Layout()super();varb:Button=newButton;... 查看详情
当我的自定义小部件有焦点时如何指定不同的图像？
】当我的自定义小部件有焦点时如何指定不同的图像？【英文标题】：Howtospecifydifferentimageswhenmycustomwidgethasfocus?【发布时间】：2010-10-0719:20:25【问题描述】：我正在尝试在我的资产文件中设置一个可绘制的选择器，如下所示：*... 查看详情
如何从 index.html 自定义元素标签接收数组作为@Input？
】如何从index.html自定义元素标签接收数组作为@Input？【英文标题】：Howtoreceiveanarrayas@Inputfromindex.htmlcustomelementtag?【发布时间】：2021-12-1209:01:24【问题描述】：我创建了一个angular的自定义元素。元素标签如下图：<test-recouserId="... 查看详情
如何在我的 Uppy 自定义设置中获取 Blob 图像预览
】如何在我的Uppy自定义设置中获取Blob图像预览【英文标题】：HowtogettheBlobimagepreviewinmyUppyCustomsetup【发布时间】：2021-04-2109:50:29【问题描述】：我学习了React，现在我使用Uppy以便用户可以选择要上传的文件。当用户选择他的文件... 查看详情
如何使用自定义钩子和 useContext 仅渲染相关组件
】如何使用自定义钩子和useContext仅渲染相关组件【英文标题】：HowtorenderonlytheconcernedcomponentwithacustomhookanduseContext【发布时间】：2021-09-1208:04:37【问题描述】：我正在尝试基于useContext创建一个自定义钩子useFocus，以便仅将焦点设... 查看详情
如何创建自定义响应式表单元素？
】如何创建自定义响应式表单元素？【英文标题】：HowdoIcreateacustomReactiveFormElement?【发布时间】：2019-06-0818:59:58【问题描述】：我正在使用Angular中的反应式表单，我正在尝试创建一个自定义表单元素，以便我可以在我的表单中... 查看详情
如何在日期选择器中添加自定义模板。？
】如何在日期选择器中添加自定义模板。？【英文标题】：Howtoaddcustomtemplateinadatepicker.?【发布时间】：2018-05-2214:55:17【问题描述】：我在我的项目中使用bootstrapdatepickerhttp://bootstrap-datepicker.readthedocs.io/en/latest/，我想知道如何为... 查看详情
如何在我的其他应用程序中使用自定义 SSO？
】如何在我的其他应用程序中使用自定义SSO？【英文标题】：HowtouseacustomSSOinmyotherapps?【发布时间】：2021-06-2416:59:57【问题描述】：我试图在我的应用程序中使用自定义SSO时碰壁了，所以我想我会退后一步，在这里提问。我按照t... 查看详情
如何在 iOS 中完全自定义 TabBar
】如何在iOS中完全自定义TabBar【英文标题】：HowdoIfullycustomiseTabBariniOS【发布时间】：2017-02-0106:51:59【问题描述】：我需要在我的iOS应用程序中自定义TabBar，如图所示我需要更改背景颜色、未选择的图像色调颜色和选择的图像色... 查看详情
如何在我的自定义视图中使用标准属性 android:text？
】如何在我的自定义视图中使用标准属性android:text？【英文标题】：Howtousestandardattributeandroid:textinmycustomview?【发布时间】：2013-08-0313:14:20【问题描述】：我编写了一个扩展RelativeLayout的自定义视图。我的视图有文本，所以我想使... 查看详情
如何在 codeigniter 中使用自定义字体和图标
】如何在codeigniter中使用自定义字体和图标【英文标题】：howtousecustomfontsandiconsincodeigniter【发布时间】：2016-02-1512:08:51【问题描述】：猛击所有人我想在我的视图中使用来自flaticon.com的自定义图标http://successpermis.com/css/flaticon.html... 查看详情
如何使用自定义元素点击事件更新范围值？
】如何使用自定义元素点击事件更新范围值？【英文标题】：Howtoupdatethescopevalueusingthecustomelementclickevent?【发布时间】：2015-09-1404:35:49【问题描述】：在我的directive中，我正在根据index值替换模板。当用户点击模板时，我需要将... 查看详情
在我的应用程序中使用自定义 UICollectionViewCell 时如何停止内存警告
】在我的应用程序中使用自定义UICollectionViewCell时如何停止内存警告【英文标题】：HowtostopmemorywarningwhenusingcustomUICollectionViewCellinmyapp【发布时间】：2014-04-0509:10:29【问题描述】：我做错了什么？我已经使用parse.com仪表板上传了一... 查看详情
如何在屏幕外窗口中呈现焦点指示器？
】如何在屏幕外窗口中呈现焦点指示器？【英文标题】：Howtorenderfocusindicatorsinanoffscreenwindow?【发布时间】：2018-03-2010:43:32【问题描述】：我正在尝试使用Qt在虚拟现实中实现自定义用户界面。我正在使用QQuickRenderControl将QML中定... 查看详情
自定义 OSK：收听 TextBox 焦点
...框控件的文本和选择属性/功能来工作。我的主要问题是如何找到合适的文本框来注 查看详情
如何自定义选择器视图
】如何自定义选择器视图【英文标题】：Howtocustomizepickerview【发布时间】：2016-10-1904:44:40【问题描述】：我想在我的项目中自定义选择器视图。在pickerview单元格中添加不同类型的图像并且还想减少pickerview高度。我给你看图片以... 查看详情
如何在奏鸣曲中获取字段类型的自定义值？
】如何在奏鸣曲中获取字段类型的自定义值？【英文标题】：Howtogetacustomvalueforafieldtypeinsonata?【发布时间】：2021-09-0223:41:28【问题描述】：在Sonata中，当我创建带有choiceType的合同时，用户可以选择contract1或contract2，在我的数据... 查看详情