Плавающий заполнитель

Question

Я пытаюсь реализовать плавающие метки для форм на моей странице.

Я сослался на пару источников и наткнулся на эту ссылку в кодефене и скрипке.

Я мог бы реализовать это, но эти подходы нуждаются в повторном выполнении всех форм, поскольку мне нужно обернуть поле ввода в поле div или fieldset и добавить метки. Есть ли способ сделать это с помощью jQuery и напрямую привязать местозаполнитель?

Я понимаю, что вопрос очень высокий. Мои извинения.

Answer 1

У меня есть решение jQuery для вас - все, что потребуется, - это добавить атрибут placeplace = "placeHolderTextGoesHere" для каждого элемента формы.

$("input").each(function(e){ 

    $(this).wrap('<fieldset></fieldset>'); 
    var tag = $(this).attr("placeholder"); 
    $(this).attr("placeholder",""); 
    $(this).after('<label for="name">'+tag+'</label>'); 
}); 

То, что мы делаем, находя все входы - оборачивать их в FIELDSET, а затем добавить метку после того, как - мы используем замещающий тег как откате для посетителей ни-JS и установите его в положение «» если JS разрешено после захвата его значения.

$("input").each(function(e) { 
 
    $(this).wrap('<fieldset></fieldset>'); 
 
    var tag = $(this).attr("placeholder"); 
 
    //var tag= $(this).data("tag"); 
 
    $(this).attr("placeholder", ""); 
 
    $(this).after('<label for="name">' + tag + '</label>'); 
 
}); 
 

 
$('input').on('blur', function() { 
 
    if (!$(this).val() == "") { 
 
    $(this).next().addClass('stay'); 
 
    } else { 
 
    $(this).next().removeClass('stay'); 
 
    } 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #eee; 
 
} 
 
form { 
 
    background: #fff; 
 
    padding: 2em; 
 
    width: 30em; 
 
    margin: 5em auto; 
 
    border-radius: 4px; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25); 
 
} 
 
fieldset { 
 
    border: none; 
 
    position: relative; 
 
    font-family: arial, sans-serif; 
 
} 
 
input { 
 
    width: 20em; 
 
    padding: 1em 1em .8em 1em; 
 
    width: 100%; 
 
    font-size: 1.2em; 
 
    border: 1px solid #aaa; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15); 
 
    border-radius: 2px; 
 
} 
 
input:focus { 
 
    outline: none; 
 
    background: #fbfbe9; 
 
} 
 
input + label { 
 
    display: block; 
 
    cursor: text; 
 
    color: #777; 
 
    transition: .15s ease-out all; 
 
    position: absolute; 
 
    top: 1.8em; 
 
    left: 2.3em; 
 
} 
 
input:focus + label, 
 
label.stay { 
 
    top: 1em; 
 
    left: 3em; 
 
    font-size: .7em; 
 
    font-weight: bold; 
 
    color: #139dd7; 
 
    transition: .15s ease-out all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" placeholder="name" name="" id="name" /> 
 
    <input type="text" placeholder="email" name="" id="email" /> 
 
</form>