html - 텍스트 - label 안에 span




HTML 폼에 여러 제출 버튼-하나의 버튼을 기본값으로 지정 (6)

다음과 같이 세 개의 제출 버튼이있는 양식이 있습니다.

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

버튼 행은 submit, reset 및 javascript 버튼이 혼합되어 있습니다. 단추의 순서는 변경 될 수 있지만 어떤 경우에도 저장 단추는 이전 단추와 다음 단추 사이에 있습니다. 여기서 문제는 사용자가 양식을 제출하기 위해 "enter"를 눌렀을 때 게시물 변수 "COMMAND"가 "Prev"를 포함한다는 것입니다. 이것은 폼의 첫 번째 제출 버튼이기 때문에 정상입니다. 그러나 사용자가 입력 버튼을 통해 양식을 제출할 때 "다음"버튼이 트리거되기를 원합니다. 다른 버튼이 있지만 기본 제출 버튼으로 설정하는 것과 비슷합니다.


Enter 키를 누를 때 제출 버튼의 숨겨진 사본을 만들 수 있습니다.

CSS 예제

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

HTML 예제

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

현재 누군가가 귀하의 양식에 입력되면, (숨겨진) 다음 버튼이 제출자로 사용됩니다.

IE9, Firefox, Chrome 및 Opera에서 테스트 됨


JavaScript를 사용하지 않는 방법으로이 작업을 수행했기 때문에이 작업을 다시 수행하고 있습니다. 나는 핵심 핸들러가 아니었고, CSS 포지셔닝은 CSS 순서 변경이 탭 순서를 변경하지 않기 때문에 탭 순서를 끊는 원인이되었습니다.

내 솔루션은 https://.com/a/9491141 의 응답을 기반으로합니다.

솔루션 소스는 다음과 같습니다. tabindex는 숨겨진 버튼의 탭 동작을 수정하는 데 사용되며 아리아 - 숨김 기능을 통해 버튼이 화면 판독기 / 보조 장치로 식별되지 않도록합니다.

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

DOM의 첫 번째 버튼 DOM의 두 번째 버튼 DOM의 세 번째 버튼

이 솔루션을위한 필수 CSS :

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

jQuery를 사용하는 경우 here 에서 작성한 주석의이 솔루션은 꽤 매끄 럽다.

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

class="default" 가되고 싶은 버튼에 class="default" 를 추가하면됩니다. 그것은 양식의 시작 부분에 바로 버튼의 숨겨진 사본을 넣습니다.


jQuery를 사용하는 또 다른 솔루션 :

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

이것은 다음 양식에서 작동해야 "Update"가 기본 조치가됩니다.

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

만큼 잘:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

폼의 입력 필드에 포커스가있을 때만 Enter 키를 트랩합니다.


내 제안은이 행동과 싸우지 않는 것입니다. 수레를 사용하여 효과적으로 순서를 변경할 수 있습니다. 예 :

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

와:

#buttons { overflow: hidden; }
#buttons input { float: right; }

효과적으로 순서를 뒤집을 것이고 따라서 "다음"버튼은 엔터를 치면 트리거되는 값이 될 것입니다.

이러한 종류의 기술은 더 많은 해킹 된 자바 스크립트 방법에 의지하지 않고도 많은 상황을 처리 할 것입니다.


첫 번째 버튼은 항상 기본값입니다. 그것은 바꿀 수 없다. 자바 스크립트로 해결할 수는 있지만 스크립트는 스크립팅하지 않고 브라우저에서 예기치 않게 동작하며 일부 유용성 / 접근성 문제가 있습니다. 예를 들어, Zoran에 의해 링크 된 코드는 실수로 <input type="button"> enter <input type="button"> 에서 Enter 키를 눌러 양식을 제출할 것이며, 일반적으로 발생하지 않을 것이며 Enter press의 양식 제출에 대한 IE 동작을 포착하지 않습니다 양식의 다른 비 필드 내용 따라서 해당 스크립트로 양식의 <p> 에있는 텍스트를 클릭하고 Enter 키를 누르면 틀린 버튼이 전송됩니다 ...이 예제에서와 같이 실제 기본 버튼이 'Delete'인 경우 특히 위험합니다!

내 충고는 스크립트 해킹을 사용하여 기본값을 재 지정하는 것을 잊어 버리는 것입니다. 브라우저의 흐름과 함께 이동하고 그냥 기본 버튼을 먼저 넣어. 레이아웃을 해킹하여 원하는 화면 상 주문을 줄 수 없다면 소스에 더미 보이지 않는 버튼을 넣고 기본값으로 사용하려는 버튼과 동일한 이름 / 값을 지정하면됩니다.

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(참고 : 위치 : display: nonevisibility: hidden 은 버튼이 기본으로 설정되었는지 여부와 제출 여부에 브라우저 변수 부작용이 있기 때문에 버튼을 화면 외부로 푸시하는 데 사용됩니다.)





submit-button