W기술과 생활

닫기 검색결과 전체 보기

    INPUT BOX의 Value값을 얻는 방법 - 브라우저 호환성

    Temp 2014. 4. 18. 19:50

    HTML에서 INPUT 박스가 있다면 해당 값의 유효성 검사를 위해 Value값을 받아야합니다.

    받는 방법은 여러 방법이 있습니다.

    하지만 여러 방법 중 웹 브라우저 호환성을 생각해서 택해야합니다.

    윈도 XP의 MS 지원 중단에도 불구하고 아직 IE6(심지어 IE5)인 사용자가 꽤 많습니다.

    Javascript 작성시 참고를 위해 포스팅합니다.



    There are various methods to get input textbox value:

    Method 1:

    document.getElementById('textbox_id').value to get the value of desired box

    Eg. document.getElementById("searchTxt").value;

     

    Note : Method 2,3,4 and 6 returns a collection of elements called NodeList, so use [whole_number] to get the desired occurence, for first element use [0] and for second one use 1 and so on...

    Method 2:

    Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live Nodelist

    Eg. document.getElementsByClassName("searchField")[0].value;if this is the first textbox in your page.

    Method 3:

    Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live nodelist

    Eg. document.getElementsByTagName("input")[0].value; ,if this is the first textbox in your page.

    Method 4:

    document.getElementsByName('name')[whole_number].value

    Eg. document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.

    Method 5:

    Use powerful document.querySelector('selector').value which uses CSS selector to select element

    Eg. document.querySelector('#searchTxt').value; selected by id document.querySelector('.searchField').value; selected by class document.querySelector('input').value; selected by tagname document.querySelector('[name="searchTxt"]').value; selected by name

    Method 6:

    document.querySelectorAll('selector')[whole_number].value which also uses CSS selector to select elements but it returns all elements with that selector as a static nodelist.

    Eg. document.querySelectorAll('#searchTxt')[0].value; selected by id document.querySelectorAll('.searchField')[0].value; selected by class document.querySelectorAll('input')[0].value; selected by tagname
    document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name

    Support

    Browser     Method1      Method2 Method3   Method4   Method5/6
    IE6             Y(Buggy)    N       Y       Y(Buggy)    N
    IE7             Y(Buggy)    N       Y       Y(Buggy)    N
    IE8             Y           N       Y       Y(Buggy)    Y
    IE9             Y           Y       Y       Y(Buggy)    Y
    FF3.0           Y           Y       Y       Y           N   IE=Internet Explorer
    FF3.5/FF3.6     Y           Y       Y       Y           Y   FF=Mozilla Firefox
    FF4b1           Y           Y       Y       Y           Y   GC=Google Chrome
    GC4/GC5         Y           Y       Y       Y           Y   Y=YES,N=NO
    Safari4/Safari5 Y           Y       Y       Y           Y
    Opera10.10/
    Opera10.53/     Y           Y       Y       Y(Buggy)    Y
    Opera10.60

    Useful links

    1. To see the support of these methods with all the bugs including more details click here
    2. Difference Between Static and Live nodelist click Here


    위 설명 출처 - http://stackoverflow.com/questions/11563638/javascript-get-input-text-value

    JS DOM 브라우저별 호환성 참고 사이트 바로가기


    저작자표시 비영리 변경금지 (새창열림)
    'Temp' 관련 글 more
    • CSS핵(hack) 정리 그리고 주요버그 2010.09.19
    • thumbnail
      Servlet - 공지파일 예제 2010.09.13
    • Servlet - 기초예제 2010.09.13
    • thumbnail
      Servlet - WAS 구동과정 및 Servlet의 생명 주기 2010.09.13
    Posted by 확인소장

바로가기

  • thumbnail 이미지 외부링크용 구글 드라이브
  • thumbnail 대기오염 실시간 확인

블로그 내용 검색

블로그 이미지

인터넷 기술, 오토핫키, 바이두 클라우드 한글화

by 확인소장

공지사항

    최근...

  • 포스트
  • 댓글
  • 더 보기

태그

  • BaiduYun
  • 百度云管家
  • ADD
  • baiduyun app
  • Android
  • Baidu cloud app
  • 바이두 클라우드
  • GUI
  • 바이두 한글화
  • baidunetdisk
  • BaiduYunGuanjia
  • 바이두 뮤직
  • 바이두 한글
  • 한글화
  • Baidu Cloud
  • AHK
  • 百度音乐
  • BaiduCloud
  • BaiduYunApp
  • autohotkey
  • baidu
  • 百度
  • 한글패치
  • apk 한글화
  • 바이두
  • 클라우드 한글화
  • 한국어
  • 한국어 패치
  • 百度云
  • 바이두 앱

글 보관함

«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

링크

카테고리

  • 모든 글타래 (266)
    • Patch (158)
      • BaiduCloud (147)
      • BaiduMusic (7)
      • XiamiMusic (2)
    • Tip (86)
      • AHKmacro (20)
      • BaiduCloud (36)
      • PC활용 (29)
    • Monologue (13)
    • ETC (3)
    • Temp (6)

카운터

Total
Today
Yesterday
  • 홈
  • 방명록
  • 링크추가
확인소장's Blog is powered by daumkakao
Skin info material T Mark 5+ by 뭐하라
favicon

W기술과 생활

인터넷 기술, 오토핫키, 바이두 클라우드 한글화

  • 홈
  • 방명록
  • 링크추가

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 모든 글타래 (266)
    • Patch (158)
      • BaiduCloud (147)
      • BaiduMusic (7)
      • XiamiMusic (2)
    • Tip (86)
      • AHKmacro (20)
      • BaiduCloud (36)
      • PC활용 (29)
    • Monologue (13)
    • ETC (3)
    • Temp (6)

카테고리

PC화면 보기
티스토리
Daum

티스토리툴바