Javascript를 사용하면 입력 필드가 읽기 전용 입력 필드로 변환됩니다.

IE의 양식에 문제가 있습니다. 나는 양식 i, 예를 들어, 속성이 disabled="disabled" 인 필드입니다. 이 필드는 입력 텍스트를 회색으로 표시하며 매우 희미하거나 흐리게 보입니다. 그런 필드에 CSS 변경 사항을 적용하면 Internet Explorer에서는 작동하지 않지만 chrome, firefox와 같은 다른 브라우저에서는 작동합니다.Javascript를 사용하면 입력 필드가 읽기 전용 입력 필드로 변환됩니다.

더 좋은 글꼴 색상으로 텍스트를 만들 수있는 방법이 있습니까?

이 작업을 수행하는 한 가지 방법은 속성 disabled="disabled"을 제거하고 자바 스크립트로 readonly="readonly" 속성을 추가하는 것입니다. 이것이 가능한 경우 어떻게하면 자바 스크립트로이 작업을 수행 할 수 있습니다. 나는 자바 스크립트를 처음 사용하므로 제발 도와주세요

아래 HTML은 동작을 설명합니다. 차이점을보기 위해 IE와 다른 브라우저에서 이것을 실행하십시오.

<html> 
    <head> 
     <style type="text/css"> 

      .col { 
       background-color: yellow; 
       color: red; 
      } 

     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td>Editable field: </td> 
       <td> 
        <input type="text" id="editable-field-id" value="Editable field" class="col"/> 
       </td> 
      </tr> 
      <tr> 
       <td>Disabled field: </td> 
       <td> 
        <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" /> 
       </td> 
      </tr> 
      <tr> 
       <td>Readonly field: </td> 
       <td> 
        <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

IE9에서 테스트하고 있습니다. jQuery로

출처

2012-10-07 Jayy

document.getElementById ("textboxid"). readOnly = true; 이것을 시도하십시오 –

'disabled = "disabled"는 IE에서 작동합니다. 너 뭐 해봤 니? –

@MuthuKumaran 예 스타일링은 배경색, 테두리 등과 같은 방식으로 작동하지만 입력 글꼴 색상은 IE에서 작동하지 않습니다. 내 질문의 업데이트 코드를 참조하십시오. HTML 및 다른 브라우저에서 코드를 실행하여 차이점을 확인하십시오. – Jayy

document.getElementById("your_field").readOnly=true;

또는 :

$('#your_field').attr('readonly', true);

출처

2012-10-07 06:43:07

<html> 
    <head> 
     <style type="text/css"> 

      .col { 
       background-color: yellow; 
       color: red; 
      } 

     </style> 

    </head> 
    <body> 
     <table> 
      <tr> 
       <td>Editable field: </td> 
       <td> 
        <input type="text" id="editable-field-id" value="Editable field" class="col"/> 
       </td> 
      </tr> 
      <tr> 
       <td>Disabled field: </td> 
       <td> 
        <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" /> 
       </td> 
      </tr> 
      <tr> 
       <td>Readonly field: </td> 
       <td> 
        <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/> 
       </td> 
      </tr> 
     </table> 
     <script type = "text/javascript"> 
      document.getElementById("disabled-field-id").disabled = false; 
      document.getElementById("disabled-field-id").readOnly = true; 
     </script> 

    </body> 
</html>

출처

2012-10-07 06:45:23

이 IE를 위해 작동하지만 크롬에서 작동하지 않습니다 – Jayy

이 '추가 <입력 유형 = "텍스트" 비활성화 = "비활성화" 클래스 = "비활성화"/>' –

이는 IE I에서 작동 할 것 믿으세요 –

-2

당신은 순수 자바 스크립트 (양호하게는 jQuery를) 솔루션에 의존 할 필요가있다. 더 엄격를 추가하려면

var value = yourTextBox.value; //the last value that the control holds, 
            //before it was disabled? 

$('yourTextBox').click(function() { 
    value = $(this).value; 
}); 

$('yourTextBox').blur(function() { 
    if($(this).attr('disabled') == 'true') 
     $(this).value = value; 
});

: 그들이 사용할 수있는 경우

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

지금 당신이 확인할 수 있습니다 당신은 자바 스크립트를 사용하여 차단 진행할 수 :

는 모든 컨트롤에 사용자 정의 속성을 추가합니다

$('yourTextBox').keypress(function() { 
    if($(this).attr('disabled') == 'true') 
     $(this).value = value; 
});

: 다른 기능을 추가 당신이 간단한 무언가를 원하는 경우

, 나는 이것을 추천 할 것입니다 :

$('yourTextBox').keypress(function() { 
    if($(this).attr('disabled') == 'true') 
     return false; 
});

출처

2012-10-07 07:09:19

"순수 javascript"는 "jQuery 라이브러리를 포함한 JavaScript"를 의미합니다. 또한 .Value는 .value (소문자 "v") 여야합니다. – nnnnnn

당신은 jQuery를에서 사용할 수있는 .prop() 방법을 사용하여 읽기 전용 것들에 사용할 입력 필드를 변경할 수 있습니다. 일반적으로 .attr() 및 this is why의 사용을 권장하지 않습니다. 인용, 때문에 방법 .removeProp()이 documentation encourages refrain when using it 사용할 수 있지만

$(function(){ 
    $('input').prop({ 
     'disabled': false, 
     'readonly': true 
    }); 
});

, 그것은 "완전히 속성을 제거하고, 한 번에 제거 요소에 다시 추가 할 수 없습니다. 대신 거짓으로 이러한 속성을 설정 .prop()를 사용합니다. " 여기

데모보기 : http://jsfiddle.net/teddyrised/tE98z/

출처

2013-12-25 04:37:56 Terry

이의 setAttribute 속성을 사용합니다. 예를 들어 1을 선택하면 텍스트 상자에 readonly 속성을 적용하고, 그렇지 않으면 속성을 읽기 전용으로 제거합니다.당신은 당신이

원하는대로 스타일을 설정할 수 있습니다 프로그래밍 입력을하지 않으면

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){ 
    if(document.getElementById("box1").value == 1) { 
    document.getElementById("codigo").setAttribute("readonly", true); 
    } else { 
    document.getElementById("codigo").removeAttribute("readonly"); 
    } 
}; 

<input type="text" name="codigo" id="codigo"/> 

<select id="box1"> 
<option value="0" >0</option> 
<option value="1" >1</option> 
<option value="2" >2</option> 
</select>

출처

2015-05-08 16:58:22

그것을 시도 : 사용자가 설정 한 스타일을 원하는 경우

//bloqueo todos los radiobuttons y checkboxs 
    //block all radiobuttons and checkbox 
    jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function() { 
    jQuery(this).prop("checked", false); 
    }); 
    //bloqueo campos de texto 
    //block all text fields 
    jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function() { 
    jQuery(this).blur(); 
    }); 
    //bloqueo selects 
    //block all selects 
    jQuery(document).on("focusin", 'select.yourClass', function (event) { 
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled'); 
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30); 
    });

가 기술적으로 불가능하지 않습니다

여기에 원본 코드가 표시됩니다. https://jsfiddle.net/9kjqjLyq/

출처

2017-10-18 15:16:57

Javascript를 사용하면 입력 필드가 읽기 전용 입력 필드로 변환됩니다.

답변

관련 문제