현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

크롬에서 웹페이지를 열면 form 상에 focus가 최초에 확인이 안됩니다..

eoen2eoen의 이미지
글쓴이: eoen2eoen / 작성시간: 화, 2017/07/18 - 2:13오후

안녕하세요 수고 많으십니다.

제가 지금 웹 프로그래밍에 대해 배워보고 있는데요..

다름이 아니라 제가 페이지를 w2ui 라이브러리를 통해 form을 만들며 구성하고 있는데

인터넷 익스플로러에선 잘됩니다만.. 크롬에서 페이지를 오픈하면

이상하게 최초 접속 할땐 focus가 전혀 표시가 되지도 않고, 클릭해도 포커싱이 되지 않습니다.

그러다가 새로고침이나 알트탭 등의 화면을 나갔다 오는 행위를 하면, 그때부턴 갑자기 또 포커스가 보입니다..

이런 경우가 있나요? 로그도 없고, 에러도 없고 해서 뭐 전혀 분석이 되질 않네요 ㅠ

조언 부탁드립니다! ㅠㅠ

Forums: 
프로그래밍 QnA
shint의 이미지

글쓴이: shint / 작성시간: 화, 2017/07/18 - 6:56오후

저도 해보니.

focus 적용 되는것
1. form 예제를 보면. focus : -1 0 1 2 옵션이 있습니다.
2. document.getElementById("test").focus(); 가 적용되기는 합니다.
3. setTimeout() 에서도 해봤는데. form 이 여러개인 경우. focus() 가 적용 안됩니다.

안되는 현상
form 로드가 중복되거나 하면. focus() 가 호출이 안되나 봅니다.

일단. 이 예제는 되네요.
http://w2ui.com/web/demos/#!forms/forms-1

원인은 아직 모르겠습니다. ㅇ_ㅇ;;

----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.

매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

eoen2eoen의 이미지

글쓴이: eoen2eoen / 작성시간: 수, 2017/07/19 - 9:19오후

참고한느데 도움이 많이 될거같네영
이게 딴 브라우저에선 문제없는데 크롬에서만 이모양이라 미치겠네여..

웃긴게.. activeElement를 통해서 콘솔로그 확인해보니 body에 포커스가 가져있긴 하더라고요..

근데.. 참; focus를 blur 시키고 다시 focus를 주든 뭘하든 간에..
그냥 최초에는 감감무소식 입니다.. 아무 focus가 되어있단 UI적 표시가 되질않네여
주소창이나 알트탭 등으로 잠깐 벗어났다 오면 그때부턴 또 정상동작하구요;

해서 지금 alert나 open을 이용해서 팝업창을 잠깐 띄웟다 없애든, alert를 잠깐 띄웠다 없애든 하고싶은데
둘다 보안성 문제로 안된다고 해서.. 더 충격 ㅠ

암튼 도움주셔서 감사해요

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.