Microsoft Edge 上的禁用文本框不可选
Posted
技术标签:
【中文标题】Microsoft Edge 上的禁用文本框不可选【英文标题】：Disabled textbox on Microsoft Edge is not selectable 【发布时间】：2020-02-27 16:57:51 【问题描述】：在我的网页中，我需要一个禁用的文本框来显示内容（很长）。
<input disabled type="text" value="a very long long long text...">
在 Chrome 中，我们可以选择禁用输入中的文本滚动查看所有内容。 但是，在 MS Edge 中，禁用的文本框似乎是不可选择的，因此无法滚动查看整个内容。 是否有自定义 CSS 以选择 Ms Edge 上禁用的文本框上的文本。
【问题讨论】：
在这种情况下，readonly 可能比disabled 更合适。
【参考方案1】：
实际上，可以从 Edge 中禁用的文本框中选择内容，但它不会像在 Chrome 中那样滚动。
<!DOCTYPE html>
<html>
<body>
<form action="">
Text : <input type="text" name="txt1" value="Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries." disabled><br>
<input type="submit" value="Submit"><br>
<textarea rows="4" cols="50">
</textarea>
</form>
</body>
</html>Edge 浏览器中的输出：
因此，如果您的要求是选择文本，那么您可以在我的测试结果中看到。
如果您的要求是滚动内容，那么目前使用 MS Edge 浏览器是不可能的。作为一种解决方法，您可以尝试使用 read only 而不是 @Turnip 已经建议的 disabled。它将允许用户滚动文本框中的文本。
我将尝试通过我们的内部渠道向 Microsoft 提交有关此问题的反馈。
【讨论】：
我可以在输入中选择整个文本，但是我不能用鼠标选择部分文本（例如：在第二个字符处按下鼠标，在第五个字符处释放鼠标） 解决方法可以将文本框的背景颜色设置为与禁用的文本框相同，并使用只读属性。因此，从外观上看，它似乎已被禁用，但用户仍然可以选择和滚动文本。 @Deepak-MSFT 感谢您提供的信息。这个问题现在解决了吗？你能帮我解决这个问题吗，stackblitz.com/edit/angular-formgroup-disabling-edge @app，看起来禁用的输入在 MS Edge 旧版浏览器中没有滚动。如果可能的话，您可以使用最新的 MS Edge Chromium 浏览器来避免此问题。如果您需要使用 Edge 旧版浏览器，那么作为一种解决方法，您可以将输入替换为 textarea 控件。禁用时它将具有滚动功能。如果您无法替换输入控件，那么您可以开发一个逻辑以在悬停时显示输入文本的另一种解决方法可能有助于解决此问题。以上是关于Microsoft Edge 上的禁用文本框不可选的主要内容，如果未能解决你的问题，请参考以下文章