HTML 表单只读 SELECT 标记/输入

Posted 2023-03-06

【中文标题】HTML 表单只读 SELECT 标记/输入

【英文标题】：HTML form readonly SELECT tag/input

【发布时间】：2010-09-26 23:55:54

【问题描述】：

根据 html 规范，HTML 中的select 标签没有readonly 属性，只有disabled 属性。所以如果你想让用户不改变下拉菜单，你必须使用disabled。

唯一的问题是禁用的 HTML 表单输入不会包含在 POST / GET 数据中。

模拟select 标记的readonly 属性并仍然获取POST 数据的最佳方法是什么？

【问题讨论】：

服务器端不要依赖它。任何人都可以创建自己的 HTML 页面并将其设为 RW。

但这不是 php 特有的问题。

我建议在这种情况下根本不要使用选择元素。有什么理由不能将值显示为纯文本？

@ppumkin 您的评论毫无意义。我并不是说选择或隐藏表单字段从来没有一个好的用例。 OP 在页面上显示一些文本时遇到问题，我只是想知道在这种情况下使用 select 元素的目的是什么。

我一定是读错了问题。他说他想禁用选择，这样用户就不会改变它。也许他需要使用选择来呈现页面并使用 jquery 来防止更改。但是当他提交回来时，没有任何数据。我也在做同样的事情。我需要显示由其他选择过滤的选择，最后一个下拉菜单通过 ajax 保存到数据库，因此必须锁定所有之前的下拉菜单。当我重新渲染页面时，是的，好的——我可以显示标签而不是选择。但这不是问题:)

【参考方案1】：

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->将从数据库中获取您的值并在表单中显示。 readonly="readonly" ->您可以在选择框中更改您的值，但您的值无法保存在您的数据库中。

【讨论】：

错误，已保存。看起来并非所有浏览器都处理“只读”属性，因此不可靠。

【参考方案2】：

如果您有一个应该是只读的选择标签，您必须在逻辑上将选择框转换为单个“文本”字段。

我这样说是合乎逻辑的，因为它就像： “我必须向用户显示一个值”

无论值是否来自选择标签，仍然是单个值，不能更改（只读）。

因此，从逻辑上讲，只有在第一次插入值时才使用选择标记。

然后，当你需要显示这个值时，你必须把它放在一个“text field-readonly”上。

如果是只读的，多选也会变成值列表（选定的值）

我使用“文本”是因为只读标签不需要“类型”属性。 干杯

【参考方案3】：

我知道为时已晚，但可以用简单的 CSS 来完成：

select[readonly] option, select[readonly] optgroup 
    display: none;

The style hides all the options and the groups when the select is in readonly state, so the user can not change his selection.

不需要任何 javascript hack。

【讨论】：

漂亮而简单。我喜欢它。

这是一个非常好的解决问题的方法。谢谢！

2020 并且不可能将只读属性添加到下拉列表中......很好的解决方法！

它就像魅力一样。优秀而优雅！谢谢

【参考方案4】：

我发现使用纯 javascript（即：不需要 JQuery 库）效果很好，是将 <select> 标记的 innerHTML 更改为所需的单个剩余值。

之前：

<select name='day' id='day'>
  <option>SUN</option>
  <option>MON</option>
  <option>TUE</option>
  <option>WED</option>
  <option>THU</option>
  <option>FRI</option>
  <option>SAT</option>
</select>

示例 Javascript：

document.getElementById('day').innerHTML = '<option>FRI</option>';

之后：

<select name='day' id='day'>
  <option>FRI</option>
</select>

这样，视觉效果没有变化，这将在<FORM>内进行POST/GET。

【参考方案5】：

更简单： 将样式属性添加到您的 select 标记：

style="pointer-events: none;"

【讨论】：

它对我有用，但指针事件将使跨浏览器支持？

它不会工作。用户可以使用键盘更改输入。

【参考方案6】：

使用 tabindex 的解决方案。 适用于选择，也适用于文本输入。

只需使用 .disabled 类。

CSS：

.disabled 
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */

JS：

$(".disabled").attr("tabindex", "-1");

HTML：

<select class="disabled">
    <option value="0">0</option>
</select>

<input type="text" class="disabled" />

---

编辑：使用 Internet Explorer，您还需要这个 JS：

$(document).on("mousedown", ".disabled", function (e) 
    e.preventDefault();
);

【参考方案7】：

我知道这不会帮助所有人（如果您只是客户端），但会帮助一些全栈并且可以控制后端和前端的人。

如果用户没有编辑字段的权限，我只返回当前选择的下拉菜单。

这是我的一些后端控制器：

        #region Prepare Action Priviledges
        editAuditVM.ExtAuditEditRoleMatrixVM = new ExtAuditEditRoleMatrixVM
        
            CanEditAcn = _extAuditEditRoleMatrixHelper.CanEditAcn(user, audit),
            CanEditSensitiveDesignation = _extAuditEditRoleMatrixHelper.CanEditSensitiveDesignation(user, audit),
            CanEditTitle = _extAuditEditRoleMatrixHelper.CanEditTitle(),
            CanEditAuditScope = _extAuditEditRoleMatrixHelper.CanEditAuditScope(user, audit)
        ;
        #endregion


        #region Prepare SelectLists for Drop Downs
        #region AuditScope List
        IQueryable<SelectListItem> auditScopes = _auditTypesRepo.AuditTypes
            .Where(at => at.AuditTypeClassCode.ToLower() == "e")
            .Select(at => new SelectListItem
             Text = at.AuditTypeText, Value = at.AuditTypeID.ToString() );
        // Cannot make a select readonly on client side.
        //  So only return currently selected option.
        if (!editAuditVM.ExtAuditEditRoleMatrixVM.CanEditAuditScope)
        
            auditScopes = auditScopes
                .Where(ascopeId => ascopeId.Value == editAuditVM.ExternalAudit.AuditTypeID.ToString());
        
        #endregion
        #endregion

【参考方案8】：

模拟选择的只读属性的最佳方法是什么 标签，并且仍然获取 POST 数据？

只需将其设为输入/文本字段并为其添加“只读”属性即可。如果选择实际上是“禁用”，那么您无论如何都无法更改该值，因此您不需要选择标签，您可以简单地将“选择”值显示为 readonly 文本输入。对于大多数 UI 用途，我认为这应该足够了。

【参考方案9】：

所以无论出于何种原因，这里提到的所有基于 jquery 的解决方案都不适合我。因此，这是一个纯 javascript 解决方案，它在进行 POST 时也应该保留选定的值。

setDropdownReadOnly('yourIdGoesHere',true/false)

    function setDropdownReadOnly(controlName, state) 
        var ddl = document.getElementById(controlName);

        for (i = 0; i < ddl.length; i++) 
            if (i == ddl.selectedIndex)
                ddl[i].disabled = false;
            else
                ddl[i].disabled = state;
        
    

【参考方案10】：

聚会有点晚了。但这对我来说似乎完美无缺

select[readonly] 
    pointer-events:none;

【参考方案11】：

我的解决方案是按照这里很多人的建议添加select[readonly] pointer-events: none; 样式，然后添加这个JS来处理键盘事件：

$(document).on('keydown', 'select[readonly]', function(e) 
    if (e.keyCode != 9) 
        if (e.preventDefault) 
            e.preventDefault();
        

        e.returnValue = false;
        e.cancel = true;
    
);

这仍然允许使用 tab 遍历元素。

【参考方案12】：

input 是你的<select> 元素：

input.querySelectorAll(':not([selected])').forEach(option => 
  option.disabled = true
)

这将保留数据中的选择（因为它没有被禁用），并且只有未被选中的option 被禁用，因此不可选择。 结果是无法更改的可读选择（=> 只读）。

【参考方案13】：

从https://***.com/a/71086058/18183749提取

如果您不能使用“禁用”属性（因为它会删除值的 POST 时输入），并注意到 html 属性“只读”仅适用 在 textarea 和一些输入（文本、密码、搜索，据我所见）上， 最后，如果你不想费心复制你所有的 带有隐藏输入逻辑的选择、复选框和单选，您可能会发现 以下功能或您喜欢的任何他的内部逻辑：

addReadOnlyToFormElements = function (idElement) 
    
        // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
        $('#' + idElement + ' select>option:not([selected])').prop('disabled',true);
    
        // and, on the selected ones, to mimic readOnly appearance
        $('#' + idElement + ' select').css('background-color','#eee');
    

没有什么比删除这些只读文件更容易的了

removeReadOnlyFromFormElements = function (idElement) 

    // Remove the disabled attribut on non-selected 
    $('#' + idElement + ' select>option:not([selected])').prop('disabled',false);

    // Remove readOnly appearance on selected ones
    $('#' + idElement + ' select').css('background-color','');