input框 可以readonly 和 disabled

summary

  • readonly 属性会使输入框内容不可修改，但仍可以选中和复制文本；disabled 属性则会完全禁用输入框，无法进行任何交互。

  • readonly 会让placeholder失效，disabled 点击也不可以

是的，你也可以将 user-select: none; 应用到 <input> 元素。尽管 <input> 元素中的文本在默认情况下不会被选中，添加这个属性可以确保用户无法选中输入框中的文本。

以下是一个示例，展示如何在 <input> 元素上使用 user-select: none;：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>禁用输入框文字选中示例</title>
    <style>
        .no-select {
            user-select: none; /* 标准 */
            -webkit-user-select: none; /* 针对 Chrome, Safari 和 Opera */
            -moz-user-select: none; /* 针对 Firefox */
            -ms-user-select: none; /* 针对 Internet Explorer 和 Edge */
        }
    </style>
</head>
<body>
    <input type="text" class="no-select" value="这个输入框中的文字不能被选中">
</body>
</html>

请注意，这样做会禁用用户选中输入框中的文字，但用户仍然可以输入和删除文本。如果你希望完全禁用用户在输入框中的交互，可以考虑将输入框设为只读或禁用：

<input type="text" class="no-select" value="这个输入框中的文字不能被选中" readonly>

或

<input type="text" class="no-select" value="这个输入框中的文字不能被选中" disabled>

readonly 属性会使输入框内容不可修改，但仍可以选中和复制文本；disabled 属性则会完全禁用输入框，无法进行任何交互。

posted @ 2024-06-26 09:25  茫茫人间刺骨凉  阅读(98)  评论(0)    收藏  举报