크롬 자동완성 막기

Open API/Jquery|2021. 12. 20. 14:18
반응형

의도치 않은 input에 아이디가 자꾸 찍혀 있어서 찾아보다보니 고질병으로 

autocomplete 속성으로 하는 방법이 있었으나 크롬 버전이 바뀌면서 사용 불가능.

 

 

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

 

https://stackoverflow.com/questions/15738259/disabling-chrome-autofill

 

Disabling Chrome Autofill

I have been running into issues with the chrome autofill behavior on several forms. The fields in the form all have very common and accurate names, such as "email", "name", or "password", and the...

stackoverflow.com

 

댓글()

jQuery 여러개의 Class가 적용된 객체 선택하기

Open API/Jquery|2018. 11. 29. 10:50
반응형

How can I select an element with multiple classes in jQuery?

- without space.

여러개의 클래스가 지정된 객체를 선택하고자 할 때.. 어떻게 해야할까

- 띄어쓰기 없이 해야함.

<span class="a b c">multiple classes</span>


$(".a.b.c").trigger("click")




댓글()

jquery ajax 동기처리가 안되는 경우.. async 옵션이 적용 안될 때.

Open API/Jquery|2017. 9. 20. 18:59
반응형

jQuery ajax 옵션중에는 async 옵션이 있습니다.

이것은 기본적으로 ajax가 비동기 처리를 하지만 필요에 따라 동기 요청을 하기 위한 옵션이지만

최근 경험상 적용이 되지 않는 것이 확인되어 api 사이트를 확인해보니 

아래와 같은 내용이 확인이 됩니다.


크로스 도메인일 경우 데이터 타입이 jsonp라면 지원되지 않는다. 

위의 조건 외에도 1.8 버전 이후부터 지원되지 않음이라고 명시되어있고 

콜백 함수를 이용하도록 명시가 되어있으니 

1.8버전 혹은 최신 버전을 사용하는 경우 문제가 될 것같습니다.


그런데...되는 경우도 있고..안되는 경우도 있고...모호하네요.


확실하게 그냥 콜백 함수를 사용해야겠습니다.


 

  async (default: true)
  Type: Boolean
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp"requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().


http://api.jquery.com/jQuery.ajax/

댓글()

modal 팝업창에서 datepicker 사용 시 연도 월 Select box가 열리지 않는 문제 해결 방법

Open API/Jquery|2017. 9. 18. 13:51
반응형


Bootstrap modal 팝업창에서 datepicker 사용 시 


changeMonth , changeYear 옵션을 true 로 사용할 경우 정상적으로 펼쳐지지 않고


바로 닫히는 버그가 있는데 꽤 오래된 상황임에도 업데이트가 되어지지 않고 있습니다.




하지만,  역시 스택오버플로우 


https://stackoverflow.com/questions/22050641/month-select-in-datepicker-inside-a-bootstrap-modal-wont-work-in-firefox


해결 방안을 제시해줍니다.


$('#modal').on('show', function () {
    $.fn.modal.Constructor.prototype.enforceFocus = function () { };
});




위와 같이 Show 혹은 modal 팝업 활성화 이후에

    $.fn.modal.Constructor.prototype.enforceFocus = function () { };

위와 같은 코딩을 실행해주면 정상적으로 연도 및 월 변경이 가능합니다.


댓글()

jQuery 특정 객체가 화면에 보이는지 여부 확인

Open API/Jquery|2016. 11. 17. 11:32
반응형



종종 해당 객체가 보여지고있는지 여부에 따라 어떤 액션을 취해야할 경우가 있습니다.


아래와 같이 체크 합니다.


if($(selector).is(":visible"))
{
    alert("노출되고있음.");
}else{
    alert("숨겨져있음.");
}


댓글()

jQuery Formatnumber , 콤마처리

Open API/Jquery|2016. 11. 17. 11:31
반응형



gitgub Url :  https://github.com/customd/jquery-number



숫자형 처리를 위한 플러그인으로 주요 처리 포맷은 아래와 같습니다.


정수 형


$.number( 5020.2364 ); // Outputs 5,020  


소수점 둘째 자리 까지


 $.number( 5020.2364, 2 ); // Outputs: 5,020.24




상세 옵션에 대해서는 


https://github.com/customd/jquery-number


댓글()

jQuery Select Box Option 동적 추가 , 이동, 삭제 , 복사

Open API/Jquery|2016. 11. 17. 11:29
반응형




Select box 간 Option 값 이동, 삭제 , 추가 하는 샘플코드 입니다.


Test Url : http://www.uhoon.co.kr/test/5237.html



<!DOCTYPE html>
<html>
<head>
    <title>append option / remove option</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="sel" name="sel" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                    <option value="5" >5</option>
                    <option value="6" >6</option>
                    <option value="7" >7</option>
                    <option value="8" >8</option>
                    <option value="9" >9</option>
                    <option value="10" >10</option>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveLeft"/>
                <input type="button" value="Selected Value " id="getValue"/>
                <input type="button" value="All Value " id="getSelectedValue"/>
                 
 
                 
 
                <input type="text" id="addOption"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd"/>
            </td>
            <td>
                <input type="button" value="Move=>" id="btnMoveRight"/>
 
                <input type="button" value="<=Move" id="btnMoveLeft"/>
 
                <input type="button" value="Copy=>" id="btnCopyLeft"/>
 
                <input type="button" value="<=Copy" id="btnCopyLeft2"/>
 
            </td>
            <td>
                <select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveRight"/>
                <input type="button" value="Selected Value " id="getValue2"/>
                <input type="button" value="All Value" id="getSelectedValue2"/>
                 
 
                 
 
                <input type="text" id="addOption2"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd2"/>
            </td>
        </tr>
    </table>
</body>
 
    <script type="text/javascript">
    <!--
        $(function(){
            $("#btnRemoveLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnRemoveRight").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnMoveRight").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove().appendTo('#sel2');
                });
            });
 
            $("#btnMoveLeft").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove().appendTo('#sel');
                });
            });
 
            $("#getValue").on("click",function(){
                var values = "";
                $('#sel option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getValue2").on("click",function(){
                var values = "";
                $('#sel2 option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue").on("click",function(){
                var values = "";
                $('#sel option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue2").on("click",function(){
                var values = "";
                $('#sel2 option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#btnCopyLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).clone().appendTo('#sel2');
                });
            });
 
            $("#btnCopyLeft2").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).clone().appendTo('#sel');
                });
            });
 
            $("#btnAdd").on("click",function(){
                if($('#sel').find("[value='"+$('#addOption').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
 
            $("#btnAdd2").on("click",function(){
                if($('#sel2').find("[value='"+$('#addOption2').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
        });
 
        $(window).load(function(e){
 
        });
 
    //-->
    </script>
</html>

댓글()

jQuery FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출

Open API/Jquery|2016. 11. 17. 11:15
반응형



FadeIn , FadeOut 을 이용한 간단한 이미지 노출.

하나가 사라지며 하나가 보여지는 그런... 

워낙 플러그인들이 잘 나와있지만

간단한걸 굳이 서치해서 적용하기 귀찮아서 가볍게 쓰기위해 만들었습니다.


사용법 

: 이미지에 "main_img" class를 추가.


* html

<div class="main_img"></div>
<div class="main_img" style="display:none;"></div>
<div class="main_img" style="display:none;"></div>
 
<!-- 별도 버튼등이 있는 경우...안써도 됨. -->
<ul id="main_bar">
    <li>
        <a href="Javascript:fnMain_image(0);"><img id="main_bar1" src="/images/main/bar_on.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(1);"><img id="main_bar2" src="/images/main/bar_off.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(2);"><img id="main_bar3" src="/images/main/bar_off.jpg" ></a>
    </li>
</ul>


* JS

<script type="text/javascript">
<!--
    // 메인 롤링 s
    var main_img = 0;
 
    function fnMain_image(img_num)
    {
        if (img_num == 0 || img_num)
        {
            main_img = img_num;
        }else{
            main_img = parseInt(main_img) + 1;
 
            if( main_img > $(".main_img").length -1 )
            {
                main_img = 0;
            }
        }
 
        for (i=0;i < $(".main_img").length ; i++)
        {
            $(".main_img").eq(i).fadeOut('slow');
        //  $("#main_bar > li:eq("+i+") > a > img").attr("src","/images/main/bar_off.jpg");
        }
 
        $(".main_img").eq(main_img).fadeIn('slow');
        //$("#main_bar > li:eq("+main_img+")  > a > img").attr("src","/images/main/bar_on.jpg");
    }
 
    setInterval(function(){ fnMain_image(); }, 3000);
    // 메인 롤링 e
//-->
</script>


댓글()