반응형
jquery clear 입력 기본값
jquery로 초점을 맞춘 입력 양식의 기본값을 지우고 해당 제출 버튼을 누르면 다시 지우려면 어떻게 해야 합니까?
<html>
<form method="" action="">
<input type="text" name="email" value="Email address" class="input" />
<input type="submit" value="Sign Up" class="button" />
</form>
</html>
<script>
$(document).ready(function() {
//hide input text
$(".input").click(function(){
if ($('.input').attr('value') == ''){
$('.input').attr('value') = 'Email address'; alert('1');}
if ($('.input').attr('value') == 'Email address'){
$('.input').attr('value') = ''}
});
});
</script>
이것을 사용해도 좋습니다.
<body>
<form method="" action="">
<input type="text" name="email" class="input" />
<input type="submit" value="Sign Up" class="button" />
</form>
</body>
<script>
$(document).ready(function() {
$(".input").val("Email Address");
$(".input").on("focus", function() {
$(".input").val("");
});
$(".button").on("click", function(event) {
$(".input").val("");
});
});
</script>
당신 자신의 코드에 대해 말하자면, jquery의 특성이 다음과 같이 설정된다는 것이 문제입니다.
$('.input').attr('value','Email Adress');
그리고 당신이 한 것처럼은 아닙니다.
$('.input').attr('value') = 'Email address';
$(document).ready(function() {
//...
//clear on focus
$('.input').focus(function() {
$('.input').val("");
});
//clear when submitted
$('.button').click(function() {
$('.input').val("");
});
});
$('.input').on('focus', function(){
$(this).val('');
});
$('[type="submit"]').on('click', function(){
$('.input').val('');
});
오래된 브라우저가 정말 걱정되지 않는 한, 새로운 html5를 사용할 수 있습니다.placeholder속성은 다음과 같습니다.
<input type="text" name="email" placeholder="Email address" class="input" />
시도해 보십시오.
var defaultEmailNews = "Email address";
$('input[name=email]').focus(function() {
if($(this).val() == defaultEmailNews) $(this).val("");
});
$('input[name=email]').focusout(function() {
if($(this).val() == "") $(this).val(defaultEmailNews);
});
속기만 하면 됩니다.
$(document).ready(function() {
$(".input").val("Email Address");
$(".input").on("focus click", function(){
$(this).val("");
});
});
</script>
언급URL : https://stackoverflow.com/questions/11755080/jquery-clear-input-default-value
반응형
'bestsource' 카테고리의 다른 글
| AngularJS에서 CREATE 컨트롤러와 EDIT 컨트롤러를 결합하는 것이 좋은 방법입니까? (0) | 2023.09.21 |
|---|---|
| 헤드리스 워드프레스로 실 시작 명령에 핫 재장전을 시도하는 중 (0) | 2023.09.21 |
| C의 함수에서 2D 배열을 반환하는 방법은? (0) | 2023.09.21 |
| jwordpress를 사용하여 WordPress에 게시물 게시 (0) | 2023.09.16 |
| SQL 또는 TSQL 튜링이 완료되었습니까? (0) | 2023.09.16 |