JavaScript에 재설정 버튼이 있습니까?

JavaScript는 HTML 및 CSS와 결합하여 웹 사이트와 웹 애플리케이션을 보다 대화형이고 동적으로 만들 수 있는 널리 사용되는 프로그래밍 언어입니다. 그러나 JavaScript를 사용하는 경우 일반적인 요구 사항인 양식을 재설정해야 할 수도 있습니다. 이 글에서는 JavaScript의 재설정 버튼과 이를 사용하는 방법을 살펴보겠습니다.

우선, 양식 요소는 HTML 양식에서 가장 중요한 요소 중 하나라는 점을 분명히 해야 합니다. 이는 사용자가 입력한 데이터를 캡처하고 처리를 위해 서버에 제출하는 데 사용됩니다. 양식 요소에는 버튼, 제출 버튼, 재설정 버튼 등의 버튼을 추가할 수 있습니다. 그 중 재설정 버튼은 양식에 있는 모든 데이터를 기본값 또는 빈 값으로 재설정하는 데 사용됩니다.

JavaScript에는 재설정 버튼 기능을 구현하는 여러 가지 방법이 있습니다. 아래에서는 그 방법들을 하나씩 소개하겠습니다.

1. 양식 요소의 재설정 메소드 사용

JavaScript에서 양식 요소에는 양식의 모든 입력 필드와 옵션을 재설정하는 데 사용할 수 있는 재설정()이라는 내장 메소드가 있습니다. 예:

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="reset" value="Reset">
</form>

<script>
  var myForm = document.getElementById("myForm");
  myForm.addEventListener("reset", function(event){
    console.log("表单已重置");
  });
</script>

위 코드에서 양식 요소에는 입력 필드, 드롭다운 목록 상자 및 재설정 유형 버튼이 포함되어 있습니다. 사용자가 재설정 버튼을 클릭하면 양식 요소의 재설정() 메서드가 트리거되어 양식의 모든 입력 필드와 옵션이 기본값 또는 빈 값으로 재설정됩니다. 동시에 위의 JavaScript 코드는 양식의 재설정 이벤트도 수신합니다. 양식이 재설정되면 메시지가 콘솔에 인쇄됩니다.

2. 새 양식을 구성하고 이전 양식으로 교체합니다.

재설정 버튼 기능을 구현하는 또 다른 방법은 새 양식을 구성하고 이전 양식으로 바꾸는 것입니다. 예:

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var oldForm = document.getElementById("myForm");
    var newForm = document.createElement("form");
    newForm.id = "myForm";
    oldForm.parentNode.replaceChild(newForm, oldForm);
  }
</script>

위 코드에서 양식 요소에는 입력 필드, 드롭다운 목록 상자 및 버튼 유형 버튼이 포함되어 있습니다. 사용자가 재설정 버튼을 클릭하면 ResetForm() 함수가 호출됩니다. 여기서 이전 양식 요소를 먼저 얻은 다음 createElement() 메서드를 사용하여 새 양식 요소를 만들고, 새로운 양식 요소는 replacementChild( ) 메소드 이전 양식 요소입니다. 이는 전체 양식을 재설정하는 것과 같습니다.

이 방법을 사용하면 일부 양식 속성, 이벤트 핸들러 및 기타 정보가 손실될 수 있으므로 간단한 양식 재설정에만 적합합니다.

3. 양식 요소 값을 수동으로 재설정

재설정 버튼 기능을 구현하는 마지막 방법은 양식 요소의 값을 수동으로 재설정하는 것입니다. 예:

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var inputs = document.getElementById("myForm").getElementsByTagName("input");
    for(var i=0; i<inputs.length; i++) {
      switch(inputs[i].type) {
        case "text":
          inputs[i].value = "";
          break;
        case "checkbox":
        case "radio":
          inputs[i].checked = false;
          break;
        default:
          break;
      }
    }
    
    var selects = document.getElementById("myForm").getElementsByTagName("select");
    for(var i=0; i<selects.length; i++) {
      selects[i].selectedIndex = 0;
    }
  }
</script>

위 코드에서 양식 요소에는 입력 필드, 드롭다운 목록 상자 및 버튼 유형 버튼이 포함되어 있습니다. 사용자가 재설정 버튼을 클릭하면 ResetForm() 함수가 호출됩니다. 이 함수는 먼저 양식 요소의 모든 입력 필드와 드롭다운 목록 상자를 획득하고 각 요소를 순회하여 해당 값을 기본값 또는 null 값으로 재설정합니다. . 특히, 텍스트 상자와 비밀번호 상자의 경우 해당 값을 비워 두십시오. 라디오 버튼 및 확인란의 경우 선택한 상태를 드롭다운 목록 상자의 경우 선택 취소로 설정하고 선택한 항목을 첫 번째 항목으로 설정하십시오.

양식에 텍스트 필드, 비밀번호 필드, 이미지 필드 등과 같은 다른 유형의 양식 요소가 포함되어 있는 경우 특정 상황에 따라 재설정해야 합니다.

요약하자면 JavaScript에는 양식을 재설정하는 방법이 많이 있습니다. 그 중 양식 요소와 함께 제공되는 Reset() 방법이 가장 간단하고 직접적입니다. 그러나 재설정 기능을 사용자 정의하는 데 더 많은 유연성이 필요한 경우 후자의 두 가지 방법을 사용할 수 있습니다. 어떤 방법을 사용하든 양식 재설정의 필요성을 쉽게 충족할 수 있으며 사용자에게 더 나은 경험을 제공할 수 있습니다.

위 내용은 JavaScript에 재설정 버튼이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!