입력 필드의 값을 기준으로 span 태그에 텍스트를 표시하는 방법

Question

입력 필드의 값에 따라 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>

그냥 내가 어떻게해야합니까?

Answer 1

.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>

Answer 2

이것은 당신이 무슨 뜻입니까?

$(function() { 
 
    $("#username-input") 
 
     .keyup(function() { 
 
      $('span#name').text($(this).val().length == 0 ? 'USERNAME' : ''); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="login-form"> 
 
    <span id="name">USERNAME</span><br> 
 
    <input id="username-input" type="text" placeholder="USERNAME"> 
 
</form>

Answer 3

솔루션 :

<form id ="login-form"> 
<span id="name"></span><br> 
<input id="username-input" type="text" placeholder="USERNAME" onkeyup='addRemoveUsername()'> 

자바 스크립트 :

function addRemoveUsername() { 
var inputChecker = document.getElementById("username-input").value; 
if (inputChecker == "") { 
     document.getElementById("name").innerHTML = ""; 
} else { 
     document.getElementById("name").innerHTML = "USERNAME"; 
} 
} 

Answer 4

솔루션 및 작업 J 이 시도 S 빈 링크 https://jsbin.com/perudafama/edit?html,console,output

$("#username-input").on('keydown', function(){ 
     var inputChecker = document.getElementById("username-input"); 
     if (inputChecker.value == "") { 
      document.getElementById("name").innerHTML = ""; 
     } else { 
      document.getElementById("name").innerHTML = "USERNAME"; 
     } 
    }) 

Answer 5

,

HTML

<span></span> 
<input type=text> 

JS는 :

$("[type=text]").keyup(function(){ 

    $(this).val()==""?$("span").html(""):$("span").html("USERNAME"); 
}) 

jQuery 라이브러리를 포함하는 것을 잊지 마십시오.

Answer 6

이 사람은 영업 이익의 요구 사항에 맞게하는 것보다 더 나은 대안을 제공하는 경우 - 그것은 더 나은 것 인정 된 답을 가지고 있지만 그것은

<script> 
    $(document).ready(function(){ 
    $('#username-input').on('change paste keyup', function(){ 
     if($(this).val() == '') 
     { 
      $('#name').html(''); 
     }else{ 
      $('#name').html('USERNAME'); 
     } 
    }); 
}); 

</script> 

Answer 7

작동합니다,이보십시오. 스팬은 레이블 요소의 대안이 아닙니다. 입력을 사용하여 양식을 작성하고 입력 레이블을 대리하도록 스팬을 사용합니다. 이는 좋지 않습니다. 작업에 올바른 도구를 사용하십시오. 그런 다음 필요에 따라 레이블 내용을 변경할 수 있습니다.

<form id ="login-form"> 
    <label for="username-input"></label> 
    <input id="username-input" type="text" placeholder="USERNAME"> 
</form> 

그런 다음 양식을 제출해야하는지 여부를 고려해야합니다. 제출 하시겠습니까? 폼에는 액션이나 메서드 또는 제출 버튼이 없습니다. AJAX를 통해 작업하는 경우 모두 괜찮지 만 입력 한 내용에는 이름이 없습니다. javascirpt/jquery를 통해 다시 작업하는 경우에는 AJAX를 통해 값을 가져올 수 있습니다. - 그러나 당신이 그것을 할 수 있다면, 나는 당신이이 간단한 문제에 대한 해결책을 적용 할 기술이 있다고 가정합니다.

또한 jQuery 코드에서 HTML을 추가/바꾸기를 제안하는 대답은 간단히 잘못되었습니다. 그렇게하지 않으면 바닐라 자바 ​​스크립트를 사용하는 경우 .text() 메서드 또는 .textContent를 사용하여 텍스트를 추가 /).

사용자 입력을 기반으로 DOM에 콘텐츠를 추가하는 아이디어는 단 하나의 구문 일뿐입니다 (물론 USERNAME 텍스트를 표시하는 것 이상을 원할 수도 있지만 그 모든 작업을 수행하는 경우 더 좋은 방법은 이미 콘텐츠를 숨기거나 CSS를 사용하여 표시하는 것입니다. 클래스를 토글하여 표시를 전환하거나 표시 여부를 사용하는 것입니다. hidden : display : none을 사용하면 레이아웃이 엉망으로 움직이며 공간으로의 입력).

이 중 어느 것도 OP로 타겟팅되어 있지 않습니다. 질문을하고 배우려고합니다.이 메시지는 답변의 포스터에게 표시됩니다. 누구나 답장을 서둘 렀습니다. 질문이 있었고 누구도 대답을 잘못했는지 생각하지 못했습니다. 새로운 코더의 기울기를 향상시킬 것입니다.