[css] input 필드의 입력 모드(한/영)를 제어 하는 ime-mode 속성 정리

input 필드의 입력 모드를 제어 하는 ime-mode  속성

input 필드에서 한/영 입력을 제어 하고 싶을때
css/style로 ime-mode 값을 설정 함으로써 제어가 가능하다.

속성은 다음과 같다.

auto (default) : 현재 모드 값을 사용한다.  한/영 변환 가능
inactive : 영문 모드로 자동 전환, 한/영 변화 가능
disabled : 영문 모드로 자동 전환 ,한/영 변환 불가
active : 한글 모드로 자동 전환, 한/영 변환 가능
deactivated: 한글기본, 한/영 전환 가능

ex> 영문/숫자만 입력하고 싶은 경우
<input type="text" name="name" value="" style="ime-mode:disabled;">


참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode

* 이 스타일 속성은 표준이 아니고 몇몇 브라우져에서는 정상 동작하지 않는 경우가 있으니 사용을 지양하는게 좋을것 같다. (크롬에서는 잘 동작하고 사파리에서는 정상 동작하지 않았다.)
* 가끔 가다가 특이한 케이스로 허용되지 않은 입력이 되는 경우가 있기 때문에 반드시 서버단에서 다시 확인을 해야 한다.

[javascript] jQuery에서 XML 파싱 하는 방법

jQuery 에서 xml 파싱하는 방법

<script>
function doSomething ( xmlData) {

    this.itemList = new Array();

    var xmlDoc = $.parseXML(xmlData);
    var $xml = $(xmlDoc);

    $xml.find('item').each(function (idx) {
        var item = new item(idx, $(this));
        this.itemList.push(item);
    });

    // 여기에서 파싱해서 만든 객체로 원하는 처리를 하면 됩니다.
}


var Item = function($xmlData) {
    var myItem = this;
    this.id = $xmlData.attr('id');
    this.type = $xmlData.attr('type');

    return myItem;
};

var xmlData = "<?xml version='1.0' encoding='UTF-8'?> " +
     "<Item id=‘id1’ type=‘triangle’>" +
     "</Item>" +
     "<Item id=‘id2’ type=‘square’>" +
     "</Item>" +
     "<Item id=‘id3’ type=‘circle’>" +
     "</Item>";
</script>

일반적으로 위와 같이 find 로 해서 each 로 사용하면 됩니다.
하지만 아래와 같이 item 엘리멘트가 상위와 하위에 중첩이 되어 있는 경우는
위 와 같은 방법은 문제가 생기게 됩니다.
find로 찾으면 상위에 있는것과 하위에 있는것을 모두 찾아 주기 때문에 다음과 같은 방법을 이용 하면 됩니다.

<script>
function doSomething ( xmlData) {

    this.itemList = new Array();
    this.groupList = new Array();

    var xmlDoc = $.parseXML(xmlData);
    var $xml = $(xmlDoc);

    $xmlData.children().each(function(idx1) {
        var eName = $(this)[0].tagName;

        if (eName == "Item) {
            var item = new Item($(this));
            this.itemList.push(item);
        } else if (eName == "Group") {
            var group = new Group($(this));
            this.groupList.push(group);
        }
    });


    // 여기에서 파싱해서 만든 객체로 원하는 처리를 하면 됩니다.
}


var Item = function($xmlData) {
    var myItem = this;

    this.itemList = new Array();
    this.groupList = new Array();

    this.id = $xmlData.attr('id');
    this.type = $xmlData.attr('type');


    $xmlData.children().each(function(idx1) {
     var eName = $(this)[0].tagName;

     if (eName == "Item) {
     var item = new Item($(this));
     this.itemList.push(item);
     } else if (eName == "Group") {
     var group = new Group($(this));
     this.groupList.push(group);
    }
  });

    return myItem;
};

var Group = function($xmlData) {
    var myGroup = this;
   
    this.itemList = new Array();
    this.groupList = new Array();

    $xmlData.children().each(function(idx1) {
        var eName = $(this)[0].tagName;
    
        if (eName == "Item) {
            var item = new Item($(this));
            myGroup.itemList.push(item);
        } else if (eName == "Group") {
            var group = new Group($(this));
            myGroup.groupList.push(group);
        }
    });

    return myGroup;
};

var xmlData = "<?xml version='1.0' encoding='UTF-8'?> " +
  "<Item id='id1' type='triangle'>" +
  "    <Group>" +
  "        <Item id='id1_sub1' type='triangle_sub'>" +
  "        </Item>" +
  "        <Item id='id1_sub2' type='triangle_sub'>" +
  "        </Item>" +
  "    </Group>" +
  "</Item>" +
  "<Item id='id2' type='square'>" +
  "</Item>" +
  "<Item id='id3' type='circle'>" +
  "</Item>";

</script>

** 더 좋은 방법이 있으면 조언 부탁드립니다.