javascript - 如何从 HTML 中的颜色选择器中删除 "other..."选项?

如何删除这个“其他...”按钮?

我的HTML代码如下: 该代码应该通过从下拉列表中选择颜色来更新

文本的颜色。我想限制用户只能使用我列出的颜色。

<body>
  <p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code>
     control.</p>

  <label for="colorWell">Color:</label>
  <input type="color" value="#ff0000" id="colorWell" list="presetColors">
 <datalist id="presetColors">
   <option>#ff0000</option>
   <option>#00ff00</option>
   <option>#0000ff</option>
 </datalist>

  <p>Watch the paragraph colors change when you adjust the color picker.
     As you make changes in the color picker, the first paragraph's
     color changes, as a preview (this uses the <code>input</code>
     event). When you close the color picker, the <code>change</code>
     event fires, and we detect that to change every paragraph to
     the selected color.</p>
  <script src="scripts.js"></script>
</body>

我的 JavaScript 代码如下:

var colorWell;
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

function updateFirst(event) {
  var p = document.querySelector("p");
  console.log(event.target.value);
  if (p) {
    p.style.color = event.target.value;
  }
}

function updateAll(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

    <label for="colorWell">Color:</label>
  <input type="color" value="#ff0000" id="colorWell" list="presetColors">
 <datalist id="presetColors">
   <option>#ff0000</option>
   <option>#00ff00</option>
   <option>#0000ff</option>
 </datalist>

最佳答案

我建议你从源代码中删除,但是如果你在源代码中找不到这个按钮,你可以用javascript remove() 方法删除。

function remove(){
document.getElementById('target').remove();
}
<button id="target">Target</button>
<br><br>
<button id="remover" onclick="remove()">Remove Button</button>

如果按钮没有id,可以用jquery这样的方法解决:

$(function(){
 setInterval(function(){
  $('button').each(function(){
  var target = $(this);
  if(target.text() == 'Other...' || target.val() == 'Other...'){
   target.remove();
  }
  });
 }, 300); // 300 ms. you can change time range.
});

if the button is loaded once with document, you don't need to use the setInterval method

关于javascript - 如何从 HTML 中的颜色选择器中删除 "other..."选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59923505/

相关文章:

google-chrome - 如何在 .Net framework 4.0.30319 中设置 H

json - Spring webflux Netty : How to expose proto

python - pytest:带参数的自定义标记

javascript - 错误 : Objects are not valid as a React

python-3.8 - Python 3.8 使用 PIP 下载包/模块错误

google-cloud-platform - 如何部署使用google cloud build和S

facebook - 在 Instagram Basic Display API 中获取 "app

wpf - 如何将新的 WPF UserControl 添加到我的 .NetCore 3.1 应用程

google-chrome - 如何告诉谷歌浏览器尊重 Xfce 上的系统默认文件浏览器 (Thun

javascript - 如何使用 JavaScript 观察 an 元素的 scrollWidth