59

我知道通过应用布尔属性将输入元素设为只读readonly，并且它是不受 CSS 影响的属性。

另一方面，我的场景似乎非常适合 CSS，所以我希望有某种 CSS 技巧可以让我这样做。我的表格上有一个可打印版本的超链接。单击它会显示文档的...可打印版本。它主要是 CSS 的东西，我的 print.css 看起来像这样：

html.print {
    width: 8.57in;
}

.print body {
    font: 9pt/1.5 Arial, sans-serif;
    margin: 0 1in;
    overflow: auto;
}

.print #header, .print #footer {
    display: none;
}

.print .content {
    background-color: white;
    overflow: auto;
}

.print .fieldset > div.legend:first-child {
    background: white;
}

.print ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}

.print :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}

.print ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}

.print :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}

.print .check-mark {
    display: inline;
}

.print input[type=checkbox] {
    display: none;
}

.print .boolean-false {
    display: none;
}

还有一些 javascript 片段，例如：

  • 将print类添加到 html 元素
  • 显示没有滚动条的表格
  • 其他一些小事情，比如隐藏任何弹出覆盖。

我目前的问题是输入字段。它们应该是只读的，但是，我不知道如何通过对代码的最小更改来做到这一点。CSS 可能是一个完美的解决方案。

有任何想法吗？

4

10 回答 10

39

仅使用 CSS？这在文本输入上是可能的，方法是使用user-select:none：

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

JSFiddle 示例。

值得注意的是，这在不支持 CSS3 或不支持user-select属性的浏览器中不起作用。理想情况下，该readonly属性应该提供给您希望只读的输入标记，但这确实可以作为一种 hacky CSS 替代方案。

使用 JavaScript：

document.getElementById("myReadonlyInput").setAttribute("readonly", "true");

编辑： CSS 方法不再适用于 Chrome (29)。现在，该-webkit-user-select属性似乎在输入元素上被忽略了。

于 2013-05-29T10:17:53.453 回答
17

（对于当前的浏览器）不可能仅通过 CSS 将输入字段设为只读。

不过，正如您已经提到的，您可以应用属性readonly='readonly'。

如果您的主要标准是不更改源代码中的标记，则可以使用 javascript 不显眼地实现这一点。

使用 jQuery，这很容易：

 $('input').attr('readonly', true);

甚至使用纯 Javascript：

document.getElementById('someId').setAttribute('readonly', 'readonly');
于 2013-05-29T10:19:34.590 回答
16

不是你真正需要的，但它可以帮助和回答这里的问题，具体取决于你想要实现的目标。

您可以使用 CSS 属性阻止将所有指针事件发送到输入：pointer-events:none 它会在元素顶部添加一个图层，阻止您单击它...您还可以cursor:text向父元素添加一个将文本光标样式返回给输入...

很有用，例如，当您无法修改模块的 JS/HTML 时。您可以通过 css 对其进行自定义。

JSFIDDLE

于 2017-06-01T15:29:13.427 回答
14

HTML 中的read-only属性用于创建不可编辑的文本输入。但在 CSS 的情况下，该pointer-events属性用于停止指针事件。

句法：

pointer-events: none;

示例：此示例显示两个输入文本，其中一个是不可编辑的。

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            Disable Text Input field 
        </title> 

        <style> 
        .inputClass { 
            pointer-events: none; 
        } 
        </style> 
    </head> 

    <body style = "text-align:center;">
        Non-editable:<input class="inputClass" name="input" value="NonEditable"> 

        <br><br> 

        Editable:<input name="input" value="Editable"> 
    </body> 
</html>

编辑静态

于 2019-07-23T09:03:05.747 回答
2

这对于 css 是不可能的，但我在我的一个网站中使用了一个 css 技巧，请检查这是否适合你。

诀窍是：用div包裹输入框并使其相对，在div内放置透明图像并使其绝对覆盖输入文本框，这样任何人都无法编辑它。

css

.txtBox{
    width:250px;
    height:25px;
    position:relative;
}
.txtBox input{
    width:250px;
    height:25px;
}
.txtBox img{
    position:absolute;
    top:0;
    left:0
}

html

<div class="txtBox">
<input name="" type="text" value="Text Box" />
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" width="250" height="25" alt="" />
</div>

jsFiddle 文件

于 2013-05-29T10:43:18.257 回答
1

CSS 不能设置任何行为。display:none在 CSS 中禁用某些东西的唯一方法是通过设置或简单地将带有透明 img 的 div 放在它上面并更改它们的 z 顺序以禁用用户用鼠标关注它来使其不可见。即使如此，用户仍然可以使用另一个字段的选项卡来聚焦。

于 2013-05-29T10:13:10.940 回答
0

您不通过 设置控件的行为CSS，只设置它们的样式。您可以使用jquery或简单javascript地更改字段的属性。

于 2013-05-29T10:22:38.970 回答
0

为什么不隐藏输入元素，用相同内容的标签元素代替呢？

我对 React TODOMVC 应用程序如何完成同样的事情感到困惑，这就是他们提出的策略。

要查看它的实际效果，请查看下面的应用程序，并在双击 TODO 项然后单击离开时查看它们的 CSS 属性。

http://todomvc.com/examples/react-backbone/#/

当你渲染页面时，你可以有一个可编辑的输入，或者一个带有 display:none 的不可编辑的标签；取决于您的媒体查询。

于 2015-04-29T20:59:45.167 回答
-1

基于 CSS 的输入文本只读更改选择的颜色：

CSS：

/**default page CSS:**/
::selection { background: #d1d0c3; color: #393729; }
*::-moz-selection { background: #d1d0c3; color: #393729; }

/**for readonly input**/
input[readonly='readonly']:focus { border-color: #ced4da; box-shadow: none; }
input[readonly='readonly']::selection { background: none; color: #000; }
input[readonly='readonly']::-moz-selection { background: none; color: #000; }

HTML：

<input type="text" value="12345" id="readCaptch" readonly="readonly" class="form-control" />

现场示例： https ://codepen.io/alpesh88ww/pen/mdyZBmV

你也可以看到我为什么完成了！(php 验证码): https://codepen.io/alpesh88ww/pen/PoYeZVQ

于 2020-01-31T06:45:13.687 回答
-14

希望这会有所帮助。

    input[readonly="readonly"]
{
    background-color:blue;
}

参考：

http://jsfiddle.net/uzyH5/1/

于 2013-05-29T10:19:57.423 回答