2011-03-07 3 views
4

일부 입력란과 숨겨진 제출 버튼이있는 양식이 있습니다 (style = "display : none"을 통해 숨김).제출 단추가 숨겨져있을 때 타격하여 양식을 제출하십시오. Firefox에서 작동하며 Chrome에서는 아무 작업도하지 않습니다.

입력란이 Firefox에서 포커스가있을 때 리턴 키를 누르면 양식이 제출됩니다.

하지만 Chrome에서는 반품 할 때 아무런 변화가 없습니다. 궁금 해서요,이 기능을 Chrome에 어떻게 다시 추가합니까?

여기 형태의, 크롬에서 그것을 살펴 : http://jsfiddle.net/B59rV/2/

<form method="post" action="/xxxx" accept-charset="UTF-8"> 

    <input type="hidden" value="SSjovFqEfRwz2vYDIsB6JRdtLAuXGmnT+tkyZnrtqEE=" name="authenticity_token"> 

    <div class="input text_field"> 
    <label>Email</label> 
    <input type="text" size="30" name="user_session[email]" /> 
    </div> 

    <div class="input text_field"> 
    <label>Password</label> 
    <input type="password" size="30" name="user_session[password]" /> 
    </div> 


    <input type="submit" value="Sign In" style="display: none;" > 

</form> 
+0

양식 코드를 게시 할 수 있습니까? – Jake

+0

나를 위해 Chrome에서 잘 작동합니다. http://jsfiddle.net/thirtydot/B59rV/ – thirtydot

+0

Errrm ... 이것 좀보세요 http://jsfiddle.net/B59rV/2/ – Smickie

답변

9

나는 그것이 크롬에서 작동하지 않는 이유는 문자 그대로 아무 생각이 없습니다. 나는 그것이 버그라고 생각한다.

그러나 과 어떻게 든 관련이 있습니다. display: none입니다.

input[type="submit"] { 
    position: absolute; 
    top: -1000px 
} 

이 그것을 숨길하지 마십시오 :

나는 불쾌한, 끔찍한 (!) 해결 방법을 찾을 대신, 화면을 꺼 놓습니다.

Live Demo - Chrome에서 작동합니다.

+0

예, 해결책은 이미 있지만, 구현 되었다면 밤에 잠을 잘 수 있다고 생각하지 않습니다. 하루에 더 이상 답변이 없으면 큰 녹색 진드기를 가질 수 있습니다. – Smickie

+0

@Smickie : 좀 더 높은 노출 태그를 사용하여 질문을 다시 살펴 보겠습니다.나는 당신에게 html/css/javascript가 없다는 것을 알아 차렸다. – thirtydot

+0

또 다른 더러운 "해결책"은 무엇입니까? visibility : hidden; – Bazzz

1

아마도 확실한 설명을 찾지 못했지만 아마 보안 "기능"일 것입니다. 암호 필드없이 http://jsfiddle.net/B59rV/2/을 시도했는데 경고가 예상대로 발생합니다. IE8에서 가치있는 일을 똑같이합니다. 그것들은 내가이 머신에서 가지고있는 유일한 브라우저이므로, 다른 어떤 것에 대해서도 테스트하지 않았다.

+1

'display : none; '은 Chrome에서 문제가 발생한 정확한 위치입니다. – Pioul

0

내가 찾은 유일한 해결 방법, 화면 밖으로 위치로 적어도 더러운, width:0; height:0;입니다 : 어떻게 든, 크롬 숨겨진 요소

0

이 Pioul의 대답처럼처럼 해석하지 않습니다하지만 난에 필요 입력 [유형 = 텍스트] 그냥 anot

테스트하지

position:absolute; //this helps the "hidden" element not disrupt the layout 
width:0; 
height:0; 
// For <= IE7 a 1px piece of the form element still shows 
// hide it with opacity=0; Tested element was input:file. 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); 

면 : [유형 = 파일] A 원소 입력에 대해 다음과 같은 작업을 수행 그녀의 접근 방식이지만 이것이 받아 들인 대답보다 훨씬 낫다고 나는 생각하지 않는다. 크롬 22과 파이어 폭스 18에서 테스트

+0

불투명도는 사실상 버튼을 숨 깁니다. 그것은 여전히 ​​클릭 가능합니다. 나쁜 해결책. – 18C

2

아마도 이것이 가장 좋은 해결 방법

.hide-submit { 
    position: absolute; 
    visibility: hidden; 
} 

<button type="submit" class="hide-submit">Ok</button> 

또는

input[type=submit].hide, 
button[type=submit].hide { 
    display: block; 
    position: absolute; 
    visibility: hidden; 
} 

<input type="submit" class="hide">Go</input> 

이 기본적으로 일반 시력의 요소를 숨 깁니다 더 일반적인 방법입니다, 필요 밀어 없습니다 화면 외부

관련 문제