如何在我的 HTML 自定义元素中接收焦点和选择事件

Posted 2023-02-23

【中文标题】如何在我的 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();

，然后就可以了！