HTML表单只读SELECT标记/输入

2020/09/23 13:41 · javascript ·  · 0评论

根据HTML规范,selectHTML中标签没有readonly属性,只有一个disabled属性。因此,如果要阻止用户更改下拉菜单,则必须使用disabled

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

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

您应该保留该select元素,disabled但还要添加另一个input具有相同名称和值的隐藏元素

如果重新启用SELECT,则应在onchange事件中将其值复制到隐藏输入并禁用(或删除)隐藏输入。

这是一个演示:

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});
#formdata_container {
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

我们也可以使用这个

禁用除选定选项之外的所有选项:

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

这样,下拉列表仍然有效(并提交其值),但用户无法选择其他值。

演示版

您可以在提交时重新启用选择对象。

编辑:即,通常禁用选择标记(具有禁用的属性),然后在提交表单之前自动重新启用它:

jQuery示例:

  • 禁用它:

    $('#yourSelect').prop('disabled', true);
  • 要在提交之前重新启用它,以便包括GET / POST数据:

    $('#yourForm').on('submit', function() {
        $('#yourSelect').prop('disabled', false);
    });

此外,您可以重新启用每个禁用的输入或选择:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

readOnlyselect元素进行属性处理的另一种方法是使用css

你可以这样做:

$('#selection').css('pointer-events','none');

演示

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

经过测试并在IE 6、7和8b2,Firefox 2和3,Opera 9.62,Safari 3.2.1(适用于Windows)和Google Chrome浏览器中工作。

简单的jQuery解决方案

如果您选择的readonly课程是此类,请使用此选项

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

或者,如果您选择的内容具有此readonly="readonly"属性

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

简单的CSS解决方案:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

这样会导致“选择”显示为灰色,

在鼠标悬停时显示漂亮的“禁用”光标,并且在选择时,选项列表为“空”,因此您无法更改其值。

我知道这为时已晚,但是可以使用简单的CSS来完成:

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

当处于选中readonly状态时,样式将隐藏所有选项和组,因此用户无法更改其选择。

无需JavaScript技巧。

另一个更现代的选项(无双关)是禁用select元素(而不是所选元素)的所有选项。

但是请注意,这是HTML 4.0功能,即6,7,8 beta 1似乎不尊重这一点。

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

这是我发现的最佳解决方案:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

上面的代码禁用所有其他未选中的选项,同时保持选中的选项处于启用状态。这样做,选定的选项会将其纳入回发数据中。

更简单:将style属性添加到您的select标签中:

style="pointer-events: none;"

这是最简单,最好的解决方案。您将在选择的内容上设置一个readolny attr或其他任何datatr-readonly等attr,并执行以下操作

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

当您计划将select设置为只读时,将其设置为disable,然后在提交表单之前将disable属性删除。

// global variable to store original event/handler for save button
var form_save_button_func = null;

// function to get jQuery object for save button
function get_form_button_by_id(button_id) {
    return jQuery("input[type=button]#"+button_id);
}

// alter value of disabled element
function set_disabled_elem_value(elem_id, value)  {
    jQuery("#"+elem_id).removeAttr("disabled");
    jQuery("#"+elem_id).val(value);
    jQuery("#"+elem_id).attr('disabled','disabled');
}

function set_form_bottom_button_save_custom_code_generic(msg) {
    // save original event/handler that was either declared
    // through javascript or html onclick attribute
    // in a global variable
    form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.6
    //form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.7

    // unbind original event/handler (can use any of following statements below)
    get_form_button_by_value('BtnSave').unbind('click');
    get_form_button_by_value('BtnSave').removeAttr('onclick');

    // alternate save code which also calls original event/handler stored in global variable
    get_form_button_by_value('BtnSave').click(function(event){
        event.preventDefault();
        var confirm_result = confirm(msg);
        if (confirm_result) {
            if (jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").length > 0) {
                jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").removeAttr("disabled");
            }

            // disallow further editing of fields once save operation is underway
            // by making them readonly
            // you can also disallow form editing by showing a large transparent
            // div over form such as loading animation with "Saving" message text
            jQuery("form.anyForm").find('input[type=text], textarea, select').attr('ReadOnly','True');

            // now execute original event/handler
            form_save_button_func();
        }
    });
}

$(document).ready(function() {
    // if you want to define save button code in javascript then define it now

    // code below for record update
    set_form_bottom_button_save_custom_code_generic("Do you really want to update this record?");
    // code below for new record
    //set_form_bottom_button_save_custom_code_generic("Do you really want to create this new record?");

    // start disabling elements on form load by also adding a class to identify disabled elements
    jQuery("input[type=text]#phone").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("input[type=text]#fax").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("select#country").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("textarea#address").addClass('disabled-form-elem').attr('disabled','disabled');

    set_disabled_elem_value('phone', '123121231');
    set_disabled_elem_value('fax', '123123123');
    set_disabled_elem_value('country', 'Pakistan');
    set_disabled_elem_value('address', 'address');

}); // end of $(document).ready function

除了禁用不应选择的选项之外,我还想使它们从列表中消失,但仍可以启用它们,以备以后使用:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

这将找到具有只读属性的所有选择元素,然后在那些未选择的选择中找到所有选项,然后将其隐藏并禁用它们。

出于性能原因,将jquery查询分成2个部分很重要,因为jquery从右到左读取它们,代码如下:

$("select[readonly] option:not(:selected)")

将首先在文档中找到所有未选择的选项,然后使用只读属性过滤select内的所有未选择选项。

一种简单的服务器端方法是删除所有要选择的选项之外的选项。因此,在Zend Framework 1.12中,如果$ element是Zend_Form_Element_Select:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);

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();
});

如果您禁用表单字段,则在提交表单时不会发送该字段。因此,如果您需要一个readonly类似于disabled但发送值的文件,请执行以下操作:

元素的只读属性发生任何更改后。

$('select.readonly option:not(:selected)').attr('disabled',true);

$('select:not([readonly]) option').removeAttr('disabled');

遵循Grant Wagners的建议;这是一个使用处理程序函数而不是直接使用onXXX属性的jQuery代码段:

var readonlySelect = function(selector, makeReadonly) {

    $(selector).filter("select").each(function(i){
        var select = $(this);

        //remove any existing readonly handler
        if(this.readonlyFn) select.unbind("change", this.readonlyFn);
        if(this.readonlyIndex) this.readonlyIndex = null;

        if(makeReadonly) {
            this.readonlyIndex = this.selectedIndex;
            this.readonlyFn = function(){
                this.selectedIndex = this.readonlyIndex;
            };
            select.bind("change", this.readonlyFn);
        }
    });

};

我用jQuery解决了它:

      $("select.myselect").bind("focus", function(){
        if($(this).hasClass('readonly'))
        {
          $(this).blur();   
          return;
        }
      });

如果您正在使用jquery validate,则可以执行以下操作,我使用了disable属性没有问题:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

我发现使用普通的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>

这样,视觉效果不会改变,这将在内进行POST / GET <FORM>

除了当前选择的选项之外,您还可以禁用所有选项,而不是选择本身。这样会显示下拉菜单,但是只有要传递的选项才是有效的选择。

html解决方案:

<select onfocus="this.blur();">

javascript:

selectElement.addEventListener("focus", selectElement.blur, true);
selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

去除:

selectElement.removeEventListener("focus", selectElement.blur, true);
selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

编辑:添加了删除方法

只需在提交表单之前删除Disabled属性即可。

    $('form').submit(function () {
        $("#Id_Unidade").attr("disabled", false);
    });
<select id="case_reason" name="case_reason" disabled="disabled">

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

晚会晚了一点。但这似乎对我来说是完美的

select[readonly] {
    pointer-events:none;
}

如果选择下拉列表自出生以来是只读的,并且根本不需要更改,那么也许应该使用另一个控件?就像一个简单的<div>(加上隐藏的表单字段)还是一个<input type="text">

补充:如果下拉列表并非始终都是只读的,并且使用JavaScript启用/禁用它,那么这仍然是一种解决方案-只需即时修改DOM。

下面为我​​工作:

$('select[name=country]').attr("disabled", "disabled"); 

我通过隐藏选择框并span在其位置仅显示参考值来管理它在禁用.readonly类的情况下,我们还需要删除.toVanish元素并显示它们.toShow

 $( '.readonly' ).live( 'focus', function(e) {
                $( this ).attr( 'readonly', 'readonly' )
                if( $( this ).get(0).tagName == 'SELECT' ) {
                    $( this ).before( '<span class="toVanish readonly" style="border:1px solid; padding:5px">' 
                            + $( this ).find( 'option:selected' ).html() + '</span>' )
                    $( this ).addClass( 'toShow' )
                    $( this ).hide()
            }
    });

在IE中,我可以通过双击来击败onfocus => onblur方法。但是记住该值,然后在onchange事件中将其还原似乎可以解决该问题。

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

您可以使用javascript变量在没有expando属性的情况下进行类似操作。

本文地址:http://javascript.askforanswer.com/htmlbiaodanzhiduselectbiaoji-shuru.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!