javascript - HTML/JS：扩展/覆盖原生 html 元素

Question

由于原生 html 元素的许多限制，我想知道是否可以使用 Web 组件扩展原生 html 元素并拥有自己的自定义行为。我已经看过有关此的页面，但是示例非常简单且薄弱，例如为锚标记添加确认。我不是在谈论添加一些简单的东西，我想修改行为。我希望数据列表始终显示所有选项元素，甚至有我自己的过滤逻辑。我永远找不到这些本机元素的实现代码，所以我无法尝试。

创建自定义元素不是一种选择（除非用于扩展本机元素）。在我的公司，我们将 openfin 用于小型 Web 应用程序。我们使用原生数据列表，因为我们需要我们的元素能够扩展到视口边界之外（自定义的东西会被剪掉）。

score 0 · Accepted Answer

下面是 webcomponents 介绍的链接：
https

://www.webcomponents.org/introduction 在该页面中，他们有指向如何实现它们的示例的链接，如下所示：
https ://www.npmjs.com/package /@polymer/paper-button

前面的信息应该让您了解所需的实现和依赖关系。您可以通过脚本添加不同的功能，甚至可以通过 CSS 进行更多修改。

即使 Web 组件基于现有的 Web 标准，它们的使用也可能需要一些跨站点通信，有时脚本/垃圾邮件拦截器可能不允许它们。由于兼容性和前面提到的，在 HTML 标准和 DOM 规范（规范）完全采用之前，我避免使用它们。
为了让它更有趣，这个 HTML 标准和 DOM 规范可以随时更改。

对于 HTML 标准： https ://html.spec.whatwg.org/ https://www.w3.org/standards/webdesign/htmlcss

对于 DOM 规范： https ://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction http://www.w3.org/DOM/ https://dom.spec.whatwg.org /

来自该领域一段时间的人的建议（我）：
- 随着事情的变化，使用您可以在当前设备/浏览器上使用的东西。
- 类似的 webcomponents 行为/感觉/外观可以通过 HTML/CSS/Javascript 的组合来实现。
- 如前所述，事情发生了变化，学习新的东西并没有错，因为下面的这个实验性 web 组件（它们可能会或可能不会实现）：
https ://www.webcomponents.org/author/fs-webcomponents

在另一个答案中，我包含了一个带有我创建的旧列表的片段。

我希望这些信息对您有所帮助或将您带到可能有帮助的其他信息。
最好的问候，
拉蒙

score 0 · Accepted Answer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0.80, user-scalable=yes">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Item1Form</title>
<script type="text/javascript" src="formState.js"></script>

</head>
<body>
<html>
    <body>
	<div title="List" style="background-color:white; color:gray; width:480px; margin-left: auto; margin-right: auto; text-align:center; border:groove 20px; border-color:darkgreen; border-radius:20px; padding: 1em;">
	      <form name="Item1form" id="cool_undoable" method="post" action="Item1Post.php" target="_blank">
	
	<div align="right" style="position: relative; left: 34px; top: -14px; height: 22px; width: 460px; padding: 0em;">

    <input type="submit" id="search-submit" value="SAVE | SALVAR" style="text-decoration: underline; background:lime; border:outset 4px; border-color:lime; border-radius:4px;"  onmouseover="style='text-decoration: underline; background:lightgreen; font-weight: bold; cursor:pointer; border:inset 4px; border-color:lime; border-radius:4px;'" onmouseout="style='text-decoration: underline; background:lime; border:outset 4px; border-color:lime; border-radius:4px;'"/>
	

<input title="Undo" type="button" onClick="window.location.reload(true);" name="Undo" value="<--]" >

<script type="text/javascript" >//	<input title="Redo" type="button" onFocus="this.blur()" onClick="formState.redo(this)" name="Redo" value="[-->">	
	</script>
	<script type="text/javascript">
	function Item1Clear() {
	ClearVal = confirm("Clear List:\n\n" + "        " + document.forms[0].item1.value + "\n\nAre you sure?");
	 if( ClearVal == true ){document.forms[0].item1.value = ""; document.forms[0].item1.focus(); return true;}
	 else
	 {document.forms[0].item1.focus(); return false;}
     }
      </script>
	<input  title="CLEAR" onclick="Item1Clear();" value="CLEAR | BORRAR" type="button" style="text-decoration: underline; background:orange; border:outset 4px; border-color:orange; border-radius:4px;"  onmouseover="style='text-decoration: underline; background:darkorange; font-weight: bold; cursor:pointer; border:inset 4px; border-color:darkorange; border-radius:4px;'" onmouseout="style='text-decoration: underline; background:orange; border:outset 4px; border-color:orange; border-radius:4px;'" />
	
	<input type="button" id="LogOut" value="LogOut" onclick="window.location.href='index.php?'; ; history.go(-1); window.location.href='index.php?'; window.close(self);" 
style="text-decoration: underline; background:tomato; border:outset 4px; border-color:red; border-radius:4px;"  onmouseover="style='text-decoration: underline; background:red; font-weight: bold; cursor:pointer; border:inset 4px; border-color:darkred; border-radius:4px;'" onmouseout="style='text-decoration: underline; background:tomato; border:outset 4px; border-color:red; border-radius:4px;'" />


  
 
 
   

  
  </div>
   
	
  
		<script type="text/javascript">
window.onload = Item1LoadXML();
    function Item1LoadXML() {
    var xmlhttp;
    if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
    xmlhttp.onreadystatechange=function()
      { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("Item1UDiv").innerHTML=xmlhttp.responseText.split("\n").slice(-2).join("\n"); }}//lines to show on red
    xmlhttp.open("GET","Item1ULog.txt",true);
    xmlhttp.send(); }
</script>
<div id="Item1UDiv" style="background-color:#FFFFCC; font-size:12px">Last User</div>
		<textarea name="item1" id="item1" cols="54" rows="8" autofocus>Data will be added here.</textarea>         <br />



			<script type="text/javascript">
	function addText(event) {
//alert(event.srcElement.innerText); event.srcElement.innerText == ""; event.srcElement.innerText.indexOf("$") == 1 &#36;

if (event.srcElement.innerText.indexOf("$") > -1) {return false}
else 
{

var targ = event.target || event.srcElement;
document.getElementById("item1").value += targ.textContent + ". " || targ.innerText;
//	document.forms[0].item1.focus(); 
}


}



	</script>
	
	<div style="overflow:scroll; height:400px; width:490px; ">
<table width="480px" style="font-size:18px"><th align="left">Type or Click the Item to add: </th></table>

<style type="text/css">
 .scrollable1{
  overflow: scroll;
   height: 160px; /* adjust this width depending to amount of text to display */
    width: 88px; /* adjust height depending on number of options to display */
   border: 1px silver solid;
 color:black; background-color:bisque; font-size:16px; font-style:italic; }
 
  .scrollable2{
  overflow: scroll;
   height: 160px; /* adjust this width depending to amount of text to display */
    width: 88px; /* adjust height depending on number of options to display */
   border: 1px silver solid;
 color:black; background-color:azure; font-size:16px; font-style:italic; }

.bloc { width:100px;  /*adjusted to always display both scrolls as wide as the widest line no <br> or  */}

.pb { margin-top:6px; color:blue; font-size:14px; text-decoration: underline; font-style:normal; line-height:2px; height:4px; }
.pb:hover { cursor:pointer; font-size:14px; text-decoration:underline; color:blue; }
</style>

<table width="480"> 
  <tr>
<td><strong>Fruits:</strong>
<div class="scrollable1"> 	
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Apples</pre>
<pre class="pb">Bananas</pre>
<pre class="pb">Grapefruit</pre>
<pre class="pb">Grapes</pre>
<pre class="pb">Melon</pre>
<pre class="pb">Oranges</pre>
<pre class="pb">Pineaple</pre>
<pre class="pb">Plums</pre>
<pre class="pb">Strawberries</pre>
<pre class="pb">Tangerines</pre>
<pre class="pb">Watermelon</pre>
</span>
</div></div>
</td>
    <td>
<strong>Veggies+:</strong>
<div class="scrollable2"> 	
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Beans</pre>
<pre class="pb">Carrots</pre>
<pre class="pb">Ginger</pre>
<pre class="pb">Lettuce</pre>
<pre class="pb">Onions</pre>
<pre class="pb">Peas</pre>
<pre class="pb">Plantains</pre>
<pre class="pb">Potatoes</pre>
<pre class="pb">Rice-brown</pre>
<pre class="pb">Rice-white</pre>
<pre class="pb">Sweet potatoes</pre>
</span>
</div></div>
</td>
    <td>
<strong>Cold+Frozen:</strong>
<div class="scrollable1">
<div class="bloc">	
Cold:
<span onclick="addText(event)">
<pre class="pb">Butter</pre>
<pre class="pb">Cheese</pre>
<pre class="pb">Eggs</pre>
<pre class="pb">Milk</pre>
<pre class="pb">Yogurt</pre>
</span></div>
Frozen:
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Broccoli</pre>
<pre class="pb">Cauliflower</pre>
<pre class="pb">Chick peas</pre>
<pre class="pb">Corn</pre>
<pre class="pb">Ice cream</pre>
<pre class="pb">Mixed veggies</pre>
</span></div>
</div>
	</td>
    <td>
<strong>Meat+Sea:</strong>	
<div class="scrollable2">
Meat:
<div class="bloc">
<span onclick="addText(event)">	
<pre class="pb">Chicken</pre>
<pre class="pb">Ham</pre>
<pre class="pb">Meat</pre>
</span></div>
Sea:
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Fish</pre>
<pre class="pb">Salmon</pre>
<pre class="pb">Shrimp</pre>
</span></div>
</div>	
	</td>
    <td>
<strong>Cans+Packs:</strong>
<div class="scrollable1">
Cans:
<div class="bloc">
<span onclick="addText(event)">
	<pre class="pb">Canned chicken</pre>
	<pre class="pb">Canned tuna</pre>
</span></div>
Packs:
<div class="bloc">
<span onclick="addText(event)">	
<pre class="pb">Almonds</pre>
<pre class="pb">Bread</pre>
<pre class="pb">Dry cranberries</pre>
<pre class="pb">Oatmeal</pre>
<pre class="pb">Peanuts</pre>
<pre class="pb">Prunes</pre>
<pre class="pb">Raisins</pre>
<pre class="pb">Seeds-flax<i onclick="alert(this.innerHTML);"> $0.99 FancyFruits Colonial</i></pre> 
<pre class="pb">Seeds-pumpkin</pre>
<pre class="pb">Seeds-sunflower</pre>	
</span></div>
</div>
	</td>
     </tr>
</table>


<table width="480"> 
  <tr>
<td>
<strong>Flavors:</strong>
<div class="scrollable2"> 	
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Cinnamon</pre>
<pre class="pb">Chocolate powder</pre>
<pre class="pb">Coffee</pre>
<pre class="pb">Dressings</pre>
<pre class="pb">Honey</pre>
<pre class="pb">Mayonnaise</pre>
<pre class="pb">Salt-iodized</pre>
<pre class="pb">Sugar-brown</pre>
<pre class="pb">Sugar-white</pre>
<pre class="pb">Vinegar</pre>
</span>
</div></div>
</td>
    <td>
<strong>Beverages:</strong>
<div class="scrollable1">
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Juice</pre>
<pre class="pb">Water</pre>
<pre class="pb">Water-Coconut</pre>
</span></div>	
</div>
	</td>

    <td>
<strong>Health:</strong>
<div class="scrollable2">
<div class="bloc">
Suplements:	
<span onclick="addText(event)">
<pre class="pb">Amino acids</pre>
<pre class="pb">Calcium</pre>
<pre class="pb">Echinacea</pre>
<pre class="pb">Ginkgo biloba</pre>
<pre class="pb">Glucosamine</pre>
<pre class="pb">Hair-Vitamins</pre>
<pre class="pb">L-lysine</pre>
<pre class="pb">Magnesium</pre>
<pre class="pb">Protein</pre>
<pre class="pb">Saw palmetto</pre>
</span></div>
<div class="bloc">
Medicinal:
<span onclick="addText(event)">
<pre class="pb">Anti-acid</pre>
<pre class="pb">Aspirin</pre>
<pre class="pb">Cream analgesic</pre>
<pre class="pb">Cream anti-fungal</pre>
<pre class="pb">Cream anti-itch</pre>
<pre class="pb">Drops-eyes</pre>
<pre class="pb">Drops-nose</pre>
<pre class="pb">Nyquil</pre>
<pre class="pb">Pepto</pre>
</span></div>
</div>
	</td>
	
    <td>
<strong>Hygiene:</strong>
<div class="scrollable1">
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Dental</pre>
<pre class="pb">Deodorant</pre>
<pre class="pb">Q-tips</pre>
<pre class="pb">Razors</pre>
<pre class="pb">Rinse</pre>
<pre class="pb">Shampoo</pre>
<pre class="pb">Soap-feminine</pre>
<pre class="pb">Soap-gel</pre>
<pre class="pb">Soap-hand</pre>
<pre class="pb">Talc</pre>
<pre class="pb">Toilet paper</pre>
<pre class="pb">Tooth paste</pre>
<pre class="pb">Wipes</pre>
</span></div>
</div>
</td>	
	
    <td>
<strong>Household:</strong>	
<div class="scrollable2">
<div class="bloc">
<span onclick="addText(event)">	
<pre class="pb">Clorox</pre>
<pre class="pb">Dish soap</pre>
<pre class="pb">Insect killer</pre>
<pre class="pb">Insect repellent</pre>
<pre class="pb">Laundry-detergent</pre>
<pre class="pb">Laundry-dryer-sheets</pre>
<pre class="pb">Laundry-rinse</pre>
<pre class="pb">Pine-sol</pre>
</span></div>
</div>	
	</td>

   
  </tr>
</table>
 



	</div>
	      </form></div>
    </body>
</html>

javascript - HTML/JS：扩展/覆盖原生 html 元素

2 回答 2

Related

Reference