Web浏览器或Internet浏览器是用于在万维网上检索，呈现和遍历信息资源的软件应用程序。
如何在客户端javascript中使用node.js缓冲区库
我想在我的网站中使用缓冲区库（为了处理二进制数据）。这是我的用例： const privateKey = Buffer.from('', 'hex'); 缓冲区工作正常...
基本上，当我将西里尔字母符号放入地址栏中时，如下所示： https://venta.uz/items/men/#?categories=мужское 它被编码并出现在 URL 地址栏中，如下所示： https://venta.uz/items/...
如何使用Playwright的addScriptTag导入和测试js库
这应该是一个非常简单的问题，所以很可能我忽略了一些东西。 我正在尝试通过 Playwright 在浏览器中测试 JS 库模块。此设置包括三个文件：
我有一个带有数据列表的 HTML 表单，其中的值是使用 PHP 设置的，例如 我有一个带有数据列表的 HTML 表单，其中的值是使用 PHP 设置的，例如 <input list="values" value="<?php echo $val; ?>"> <datalist id="values"> <option value="orange"> <option value="banana"> </datalist> 我希望用户看到数据列表中的选项，以及来自 PHP 的当前值。但是，“自动完成”操作会导致列表中与当前值不匹配（或以当前值开头）的值从列表中隐藏，例如 $val='apple'。有什么办法可以避免这种情况，或者这种行为是由浏览器修复的吗？ <datalist> 使用自动完成功能，因此这是正常行为。 例如，如果您将输入值设置为“o”，您将在数据列表选项中仅看到orange。它从第一个字母开始检查单词。但如果您将输入值设置为“a”，那么您根本不会看到选项。 因此，如果输入中已经有值，那么数据列表选项中将不会显示任何内容，除非该值存在。它的行为不像选择。 解决此问题的方法是使用 jquery，例如： $('input').on('click', function() { $(this).val(''); }); $('input').on('mouseleave', function() { if ($(this).val() == '') { $(this).val('apple'); } }); 完整测试在这里：https://jsfiddle.net/yw5wh4da/ 或者您可以使用<select>。对我来说，在这种情况下这是更好的解决方案。 我发现使用 click 和 mouseleave 事件并不理想，因为它们无法使用 键盘控件。 所以我想出了这个辅助函数： 更新：输入后触发blur()事件 正如 @Joe Platano 所评论的，我们可以通过在输入事件后触发 blur() 来改进数据列表行为（至少对于基于 chromium/blink 的浏览器）。 keepDatalistOptions('.keepDatalist'); function keepDatalistOptions(selector = '') { // select all input fields by datalist attribute or by class/id selector = !selector ? "input[list]" : selector; let datalistInputs = document.querySelectorAll(selector); if (datalistInputs.length) { for (let i = 0; i < datalistInputs.length; i++) { let input = datalistInputs[i]; input.addEventListener("input", function(e) { e.target.setAttribute("placeholder", e.target.value); e.target.blur(); }); input.addEventListener("focus", function(e) { e.target.setAttribute("placeholder", e.target.value); e.target.value = ""; }); input.addEventListener("blur", function(e) { e.target.value = e.target.getAttribute("placeholder"); }); } } } <div style="display:flex; gap:1em;"> <div> <h3>Keep datalist options</h3> <input class="keepDatalist" type="text" list="data" value="apple"> <datalist id="data"> <option value="apple"> <option value="orange"> <option value="banana"> </datalist> </div> <div> <h3>Default behavior</h3> <input type="text" list="browser" value=""> <datalist id="browser"> <option value="firefox"> <option value="opera"> <option value="safari"> </datalist> </div> </div> 主要概念基本相同： 将当前输入值保存到占位符属性 重置焦点值以显示所有数据列表选项 将实际输入值与输入上的占位符交换 此函数还会更新输入事件的当前值 - 否则在通过 Tab 键导航到下一个输入后您将丢失当前值。 为什么你不应该搞乱表单元素的默认行为 例如，Firefox 不会接受这种黑客攻击 - 可能有充分的理由。 处理表单时，您的首要任务始终应该是： 可靠性： 即使在不太现代的浏览器中也可以成功提交表单数据 辅助功能： 自定义黑客也适用于使用屏幕阅读器（如 NVDA 或 JAWS）的视障人士 因此，如果您的自定义表单元素行为提供了可靠且可预测的用户体验，您应该始终“三重/四重检查”。 HTML： <input list="values" placeholder="select"> <datalist id="values"> <option value="orange"> <option value="banana"> <option value="lemon"> <option value="apple"> </datalist> JS： $('input').on('click', function() { $(this).attr('placeholder',$(this).val()); $(this).val(''); }); $('input').on('mouseleave', function() { if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); } }); 上面的解决方案很棒，但是如果用户自然地只是单击输入框中占位符值旁边的按钮，打算保留并继续它，那么它将被完全擦除。 因此，基于上述解决方案，我为我做了以下解决方案： HTML： <input id="other" list="values" value="<?php echo $val; ?>"> <datalist id="values"> <option value="orange"> <option value="banana"> </datalist> JS： jQuery(document).ready(function ($) { function putValueBackFromPlaceholder() { var $this = $('#other'); if ($this.val() === '') { $this.val($this.attr('placeholder')); $this.attr('placeholder',''); } } $('#other') .on('click', function(e) { var $this = $(this); var inpLeft = $this.offset().left; var inpWidth = $this.width(); var clickedLeft = e.clientX; var clickedInInpLeft = clickedLeft - inpLeft; var arrowBtnWidth = 12; if ((inpWidth - clickedInInpLeft) < arrowBtnWidth ) { $this.attr('placeholder',$this.val()); $this.val(''); } else { putValueBackFromPlaceholder(); } }) .on('mouseleave', putValueBackFromPlaceholder); }); 对于我来说，页面上有很多输入框，我只希望这个输入框具有这种行为，所以我使用 id 并将其设置为“个人”。如果您希望将其更改为更通用的函数，则必须将 putValueBackFromPlaceholder 与发生单击的元素以及事件本身绑定。 基于建议的解决方案的另一种选项，保留先前的值或选择的新值。 // Global variable to store current value var oldValue = ''; // Blank value when click to activate all options $('input').on('click', function() { oldValue = $(this).val(); $(this).val(''); }); // Restore current value after click $('input').on('mouseleave', function() { if ($(this).val() == '') { $(this).val(oldValue); } }); https://jsfiddle.net/jpussacq/7Ldbc013/ 最干净的选项可能是 Mozilla.org 推荐的选项。 input.onfocus = function () { datalist.style.display = 'block'; } input.onblur = function () { datalist.style.display = 'none'; } for (let option of datalist.options) { option.onclick = function () { input.value = this.value; datalist.style.display = 'none'; } } datalist.style.width = input.offsetWidth + 'px'; datalist.style.left = input.offsetLeft + 'px'; datalist.style.top = input.offsetTop + input.offsetHeight + 'px'; datalist { position: absolute; background-color: lightgrey; font-family: sans-serif; font-size: 0.8rem; } option { background-color: #bbb; padding: 4px; margin-bottom: 1px; cursor: pointer; }<input list="" name="option" id="input" autocomplete="off" > <datalist id="datalist"> <option>Carrots</option> <option>Peas</option> <option>Beans</option> </datalist> function InputDropList_Focus(elementID) {//input must have value and valuetemp attributes const el=document.getElementById(elementID); el.setAttribute("valuetemp", el.value); el.value=""; } function InputDropList_FocusOut(elementID) { const el=document.getElementById(elementID); if(el.value !== el.getAttribute("valuetemp")) el.value=el.getAttribute("valuetemp"); } function InputDropList_OnChange(elementID, action) { const el=document.getElementById(elementID); el.setAttribute("valuetemp", el.value); el.blur(); if(action != null) action(); } function DoSmthOnChange(elementID) { const el=document.getElementById(elementID); console.log("new value: " + el.value); } <input id="mylist" list="mylistOptions" value="apple" valuetemp="apple" onfocus="InputDropList_Focus('mylist')" onfocusout="InputDropList_FocusOut('mylist')" onchange="InputDropList_OnChange('mylist', DoSmthOnChange('mylist'))" > <datalist id="mylistOptions"> <option value="apple"> <option value="orange"> <option value="banana"> </datalist> 我在动态填充<datalist>时遇到了这个问题。仅显示一个 <option>。我的用例是输入type=search，就像搜索引擎输入一样。 技巧是将输入的 .value 设置为 单个不间断行空格，或 ，或简单地“”。 （不是“”。必须有一个空格“”）。 因此，在动态 .append 选项之后，myDatalist.value = " ";。现在将显示所有选项。 我尝试了很多东西，终于找到了这个。希望开发者喜欢这样。 <input id="mylist" list="mylistOptions" value="" onfocus="this.value=null;" onchange="this.blur();" > <datalist id="mylistOptions"> <option value="apple"> <option value="orange"> <option value="banana"> </datalist> 这是 herrstriezel 的答案（在 es6 中）的改进版本 function keepDatalistOptions(selector = 'input[list]') { // select all input fields by datalist attribute or by class/id document.querySelectorAll(selector).forEach(dataListInput => { let dataListValue = dataListInput.value dataListInput.addEventListener('focus', () => { dataListValue = dataListInput.value dataListInput.value = '' }) dataListInput.addEventListener('change', () => { dataListValue = dataListInput.value }) dataListInput.addEventListener('blur', () => { if (dataListInput.value === '') { dataListInput.value = dataListValue } }) }) } 只需将所需的默认值粘贴到输入标签中即可。无需额外的 JavaScript 编码！ <input list="skills" value="DBA"> <datalist name="skills" id="skills"> <option value="PHP">Zend PHP</option> <option value="DBA">ORACLE DBA</option> <option value="APEX">APEX 5.1</option> <option value="ANGULAR">ANGULAR JS</option> </datalist>
TestCafe 无法连接到我的主机文件中指定的本地主机，该文件连接到 DevTest 又名 Lisa 服务虚拟化系统
如何连接到本地主机？ 本地主机在我的主机文件中指定，如下所示： #启用SSL的端口：44323 127.0.0.1 视觉.tests.com 127.0.0.1 视觉.tests.com/motors 夹具`电机...
当页面/选项卡失去焦点时，Mui Snackbar autoHideDuration 会暂停
我一直在使用 MUI Snackbar 及其 autoHideDuration 选项，但在测试时我注意到，当页面失去焦点时，例如当您转到另一个选项卡时，它会暂停并且小吃栏保持显示状态...
该任务的想法是为用户提供有用的链接以供审阅。 但从客户端来看，在 ISP 级别，资源可以被阻止。 是否可以用 javascript 检查可用性...
为什么我的浏览器在执行整个 selenium 代码之前自动关闭？
我正在使用 python 和 selenium 研究网络自动化，并创建了一个代码来在输入文本中插入一个值。 这是我的代码： 从硒导入网络驱动程序 从 selenium.webdriver.common.by 导入...
我运行了selenium python，浏览器中的配置文件消失了： 但是，配置文件仍然位于 \AppData\Local\Google\Chrome\User Data 文件夹中： 为什么他们被从兄弟身边移走......
我们有一个 Web 应用程序 + Node.js 服务器，受 mTLS 保护。客户提出了通过颁发具有不同权限的多个客户端证书来为用户分配角色的想法。有效地，wh...
IFrame 本地存储名称在 Chrome 浏览器中具有附加后缀“^0<parent domain url>”
我在 Chrome 中遇到了奇怪的行为 与浏览器决定的本地存储url命名有关。 我注意到 iframe 内的本地存储名称有一个后缀“^0”
浏览器如何仅通过 URL 调用外部应用程序（例如 Teams 或 Zoom）？
当我将 Teams 生成的 URL 粘贴到浏览器（特别是 Chrome）中时，浏览器询问我是在浏览器中还是在 Teams 外部应用程序中打开该链接。机制是什么...
我会添加我的网站按钮 A + 和 A- 进行缩放。 我希望全身都是毛茸茸的 所以我创建了这段代码 .container{宽度：800px;背景：#000;...</desc> <question vote="3"> <p>我会添加我的网站按钮 A + 和 A- 进行缩放。 我希望全身都是毛茸茸的 所以我创建了这段代码</p> <pre><code><html> <body> <style> .container{width: 800px;background: #000;} p{color:#fff;} a { color: #FFCC00;} </style> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p> <script type="text/javascript"> function ZoomScreen100() { document.body.style.zoom="100%" } function ZoomScreen200() { document.body.style.zoom="200%" } function ZoomScreen300() { document.body.style.zoom="300%" } function ZoomScreen400() { document.body.style.zoom="400%" document.body.style.zoom="400%" } </script> <a href="#" onclick="ZoomScreen100()">A+</a> <a href="#" onclick="ZoomScreen200()">A+</a> <a href="#" onclick="ZoomScreen300()">A+</a> <a href="#" onclick="ZoomScreen400()">A+</a> </body> </code></pre> <p> 它适用于 Chrome、Internet Explorer、Safari，但不适用于 Firefox 和 Opera。为什么？</p> </question> <answer tick="true" vote="6"> <p><pre><code>zoom</code></pre>是一个非标准属性，<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936" rel="nofollow noreferrer">尚未被Firefox实现</a>，最接近的跨浏览器属性是<pre><code>transform</code></pre>（<a href="http://jsfiddle.net/Akm4D/1" rel="nofollow noreferrer">demo</a>）：</p> <pre><code>document.body.style.transform = 'scale(2)'; </code></pre> <p>但是，效果与应用<pre><code>zoom</code></pre>不同：父上下文（例如宽度、高度）不会更新。如果这是您的意图，您可能需要考虑使用 <pre><code>calc()</code></pre> 和所选属性的乘数：</p> <pre><code>document.body.style['--zoom'] = '2'; document.body.style.fontSize = 'calc(16px * var(--zoom))`; </code></pre> </answer> <answer tick="false" vote="1"> <p>看看 <a href="http://www.browsersupport.net/CSS/zoom" rel="nofollow">http://www.browsersupport.net/CSS/zoom</a>。我无法让它在 Firefox 或 Opera 中正常工作，最直接的解释是这些浏览器还没有实现对它的支持。 （Firefox 23.0.1 通过了链接站点上的一项测试；Opera 12.16 均未通过。）</p> <p>这不是你写的——而是你提到的浏览器还没有准备好。 （这并不奇怪——尽管你会发现网站告诉你缩放是在规范中的，但我在实际的 w3c 文档中找不到它的任何地方列出。也许是在喝了更多咖啡因之后......）</p> <p>话虽这么说，请记住，兼容的页面将有一个元素，这就是样式所在的位置。我认为这是一个快速的冲刺，你忘记了头部元素。 :)</p> </answer> <answer tick="false" vote="1"> <p><a href="https://stackoverflow.com/a/64473943/3534015">https://stackoverflow.com/a/64473943/3534015</a></p> <p>最好的解决方案是使用 <pre><code>zoom: 50%</code></pre></p> <p>我用 javascript 做了这个例子，你可以测试它并根据需要更改它</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var zoomediv = document.getElementById('zoomediv') var zoomin_button = document.querySelector('#zoomin') zoomin_button.addEventListener('click', function(){ zoomediv.style.zoom = '125%' }) var zoomout_button = document.querySelector('#zoomout') zoomout_button.addEventListener('click', () => { zoomediv.style.zoom = '75%' })</code></pre> <pre><code>div { background: #f0f0f0; border: 1px solid #e0e0e0; width: fit-content; padding: 1rem; margin-bottom: 1rem; } button { padding: 0 3rem; }</code></pre> <pre><code><div id="zoomediv"> <h1> Title </h1> <p> this is a paragraph </p> </div> <button id="zoomin"> <h1> + </h1> </button> <button id="zoomout"> <h1> - </h1> </button></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>不错 但这不是真正的缩放比例</p> <p>模拟时钟时间选择器不工作 和 添加时隙是目标</p> <p><a href="https://ldijkman.github.io/randomnerd_esp32_wifi_manager/mrs/create_from_scratch/testarea/zoomtest.html" rel="nofollow noreferrer">https://ldijkman.github.io/randomnerd_esp32_wifi_manager/mrs/create_from_scratch/testarea/zoomtest.html</a></p> <p><a href="https://i.stack.imgur.com/YLe4M.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1lMZTRNLnBuZw==" alt=""/></a></p> </answer> </body></html>
有两个与浏览器网页初始化相关的事件。 DOMContentReady(document object) ：解析 HTML 文档并构建 DOM 树 load(window object) : HTML 的所有元素
有没有办法在用户关闭浏览器窗口或刷新页面时运行最终的 JavaScript 代码？ 我正在考虑类似于 onload 但更像 onclose 的东西？谢谢。 我不喜欢
我到处都遇到一个非常荒谬的问题。我创建的每个新 Django 项目都使用我很久以前制作的旧图标。换句话说，所有新的 Django 项目都有这个旧的图标...
是否可以在不打开 devtool 的情况下启用“硬重新加载”和“清空缓存并硬重新加载”选项？
我想知道是否有一个选项或开关可以在重新加载按钮下启用“硬重新加载”和“清空缓存并硬重新加载”选项，而无需打开devto...
当我用history.pushState(newUrl)更改我的URL几次，之后我尝试返回一页时出现错误，我发现如果我执行pushState(newUrl/)而不是(newUrl ），这个...
开发者在 Chrome 中是否有清空缓存和硬重新加载的快捷方式？
我正在尝试查找 chrome 中是否有清空缓存和硬重新加载快捷方式的快捷方式，而不是控制台日志记录和使用空缓存选项。