解决 HTML 输入框无法鼠标拖动全选文本问题：巧用 JS 实现！

在HTML中，`<input type="text">` 输入框默认情况下是无法通过鼠标拖动来全选其中的文本。这是因为浏览器对这种类型的输入框有一些默认的行为和限制。如果你想实现这个功能，可以通过 JavaScript 来自定义一个输入框组件。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Input</title> <style> .custom-input { width: 300px; height: 30px; padding: 5px; border: 1px solid #ccc; } </style> </head> <body> <div class="custom-input" contenteditable="true" id="customInput"></div> <script> const customInput = document.getElementById('customInput'); customInput.addEventListener('mousedown', function (e) { if (e.button === 0) { // left mouse button this.focus(); window.getSelection().selectAllChildren(this); } }); </script> </body> </html> ``` 在这个示例中，我们创建了一个可编辑的 div 元素，并使用 JavaScript 监听鼠标按下事件。当用户点击左键时，我们会聚焦到这个元素并全选其中的内容。这样就实现了通过鼠标拖动来全选文本的功能。 ######[AI写代码神器 | 316点数解答 | 2023-11-12 22:25:01]

服务商

更多选项

快捷项

自定义