입력 필드의 값에 따라 span 태그에 텍스트를 표시하는 방법

알리 파 루크

입력 필드의 값에 따라 span 태그에 "USERNAME"텍스트를 표시하고 싶습니다.

입력 필드에 값이 있으면 span 태그에 "USERNAME"이라는 텍스트를 표시하고 싶습니다. 입력 필드에 값이 없으면 span 태그 안에 텍스트가 없기를 원합니다.

$(function () {
    $("#username-input")
        .keydown(function () {
            function addRemoveUsername() {
                var inputChecker = document.getElementById("username-input");
                if (inputChecker.value == "") {
                    document.getElementById("name")
                        .innerHTML = "";
                } else {
                    document.getElementById("name")
                        .innerHTML = "USERNAME";
                }
            }
            addRemoveUsername();
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
    <span id="name"></span><br>
    <input id="username-input" type="text" placeholder="USERNAME">
</form>

어떻게해야합니까?

라훌 파텔

.keyup아래 스 니펫으로 사용하십시오 .

$(function () {
  $("#username-input").keyup(function() {
    var inputChecker = document.getElementById("username-input");
    //blank spaces will be trimmed before text from the input field
    if ($.trim(inputChecker.value) == "") {
      document.getElementById("name").innerHTML = ""; 
      inputChecker.value = "";
    } else {
      document.getElementById("name").innerHTML = "USERNAME";
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id ="login-form">
    <span id="name"></span><br>
    <input id="username-input" type="text" placeholder="USERNAME">
</form>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

입력 필드의 변경에 따라 상태를 업데이트하는 방법은 무엇입니까?

분류에서Dev

Angular 6 Reactive Forms- 다른 입력 선택에 따라 텍스트 필드를 채우는 방법

분류에서Dev

jQuery로 span 태그의 텍스트를 data-attr에 추가하는 방법은 무엇입니까?

분류에서Dev

루프에서 BeautifulSoup의 span 태그에서 텍스트를 얻는 방법

분류에서Dev

react-admin에서 BooleanInput 필드의 상태에 따라 양식 필드를 동적으로 표시하거나 숨기는 방법은 무엇입니까?

분류에서Dev

드롭 다운에서 선택한 옵션에 따라 텍스트 필드를 숨기거나 표시하는 방법은 무엇입니까?

분류에서Dev

사용자가 Drupal 7의 웹 양식에 입력 한 조건에 따라 티저 (필드)를 표시하는 방법은 무엇입니까?

분류에서Dev

텍스트 입력에 따라 플래그 필드를 예 또는 아니요로 설정하는 방법-Microsoft-Project-VBA

분류에서Dev

값의 양에 따라 div를 표시하는 방법

분류에서Dev

입력 필드 앞에 텍스트를 추가하는 방법

분류에서Dev

DAX : 텍스트 값에 따라 색상 16 진수 코드를 할당하는 방법은 무엇입니까?

분류에서Dev

텍스트 필드에 입력 할 때 쉼표를 전달하는 방법

분류에서Dev

CSS에서 위의 텍스트에 따라 텍스트를 정렬하는 방법은 무엇입니까?

분류에서Dev

다른 텍스트 필드에 값을 입력 할 때 텍스트 필드를 지우는 방법

분류에서Dev

jquery의 다른 span 태그 안에 span 태그를 추가하는 방법은 무엇입니까?

분류에서Dev

편집 페이지의 확인란 값에 따라 필드를 숨기고 표시하는 방법

분류에서Dev

자바 스크립트의 입력 숫자 유형 필드에 값을 입력하면 입력 텍스트 필드를 표시하는 방법은 무엇입니까?

분류에서Dev

Selenium WebDriver 자바 스크립트의 Span 태그에서 텍스트를 확인하는 방법

분류에서Dev

Mat-Select 옵션에 따라 입력 상자를 표시하는 방법

분류에서Dev

두 텍스트 필드의 값을 합산하고 결과를 세 번째 텍스트 파일에 표시하는 방법은 무엇입니까?

분류에서Dev

방법에 따라 필드를 무시하는 방법은 무엇입니까?

분류에서Dev

p 태그에서 입력 텍스트 필드로 텍스트를 콜백하는 방법은 무엇입니까?

분류에서Dev

tr 행 추가는 입력 텍스트 값의 값에 따라 다릅니다.

분류에서Dev

드롭 다운 선택에 따라 강력한 형식의 텍스트 상자를 채우는 방법

분류에서Dev

탐색 막대의 진행 상황에 따라 텍스트 뷰를 표시하는 방법

분류에서Dev

Beautiful Soup을 사용하여 Python에서 span 태그 내부의 텍스트를 잡는 방법

분류에서Dev

셀레늄 및 크롬 드라이버를 사용하여 .net의 숨겨진 필드에 텍스트를 입력하는 방법

분류에서Dev

재료 UI 자동 완성의 입력 텍스트 필드에 선택한 값을 표시하는 방법은 무엇입니까?

분류에서Dev

preg_match에 따라 문자열의 텍스트를 다르게 표시하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    입력 필드의 변경에 따라 상태를 업데이트하는 방법은 무엇입니까?

  2. 2

    Angular 6 Reactive Forms- 다른 입력 선택에 따라 텍스트 필드를 채우는 방법

  3. 3

    jQuery로 span 태그의 텍스트를 data-attr에 추가하는 방법은 무엇입니까?

  4. 4

    루프에서 BeautifulSoup의 span 태그에서 텍스트를 얻는 방법

  5. 5

    react-admin에서 BooleanInput 필드의 상태에 따라 양식 필드를 동적으로 표시하거나 숨기는 방법은 무엇입니까?

  6. 6

    드롭 다운에서 선택한 옵션에 따라 텍스트 필드를 숨기거나 표시하는 방법은 무엇입니까?

  7. 7

    사용자가 Drupal 7의 웹 양식에 입력 한 조건에 따라 티저 (필드)를 표시하는 방법은 무엇입니까?

  8. 8

    텍스트 입력에 따라 플래그 필드를 예 또는 아니요로 설정하는 방법-Microsoft-Project-VBA

  9. 9

    값의 양에 따라 div를 표시하는 방법

  10. 10

    입력 필드 앞에 텍스트를 추가하는 방법

  11. 11

    DAX : 텍스트 값에 따라 색상 16 진수 코드를 할당하는 방법은 무엇입니까?

  12. 12

    텍스트 필드에 입력 할 때 쉼표를 전달하는 방법

  13. 13

    CSS에서 위의 텍스트에 따라 텍스트를 정렬하는 방법은 무엇입니까?

  14. 14

    다른 텍스트 필드에 값을 입력 할 때 텍스트 필드를 지우는 방법

  15. 15

    jquery의 다른 span 태그 안에 span 태그를 추가하는 방법은 무엇입니까?

  16. 16

    편집 페이지의 확인란 값에 따라 필드를 숨기고 표시하는 방법

  17. 17

    자바 스크립트의 입력 숫자 유형 필드에 값을 입력하면 입력 텍스트 필드를 표시하는 방법은 무엇입니까?

  18. 18

    Selenium WebDriver 자바 스크립트의 Span 태그에서 텍스트를 확인하는 방법

  19. 19

    Mat-Select 옵션에 따라 입력 상자를 표시하는 방법

  20. 20

    두 텍스트 필드의 값을 합산하고 결과를 세 번째 텍스트 파일에 표시하는 방법은 무엇입니까?

  21. 21

    방법에 따라 필드를 무시하는 방법은 무엇입니까?

  22. 22

    p 태그에서 입력 텍스트 필드로 텍스트를 콜백하는 방법은 무엇입니까?

  23. 23

    tr 행 추가는 입력 텍스트 값의 값에 따라 다릅니다.

  24. 24

    드롭 다운 선택에 따라 강력한 형식의 텍스트 상자를 채우는 방법

  25. 25

    탐색 막대의 진행 상황에 따라 텍스트 뷰를 표시하는 방법

  26. 26

    Beautiful Soup을 사용하여 Python에서 span 태그 내부의 텍스트를 잡는 방법

  27. 27

    셀레늄 및 크롬 드라이버를 사용하여 .net의 숨겨진 필드에 텍스트를 입력하는 방법

  28. 28

    재료 UI 자동 완성의 입력 텍스트 필드에 선택한 값을 표시하는 방법은 무엇입니까?

  29. 29

    preg_match에 따라 문자열의 텍스트를 다르게 표시하는 방법은 무엇입니까?

뜨겁다태그

보관