Question

我正在构建自定义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>

不幸的是，这些输入框都没有被选中或处于焦点状态。

Answer 1

经过几次试验，我发现由于所有DateCell均未连接到DOM，因此未显示“选择”和“聚焦”效果。

因此，我更改了以下代码：

   ..............
   cell2.select();
   $(cell3).val("b");
   $(cell3).focus();
   $(document.body).append(t);

到

  ..............
  $(cell3).val("b");
  $(document.body).append(t);
  cell2.select();
  $(cell3).focus();

，那么就可以了！

如何在我的HTML自定义元素中获得焦点并选择事件

1 个答案: