Как проверить, имеет ли входной текст значение, не вызывая отправки в нем только сценарием Java - PullRequest
Новая
       5

Как проверить, имеет ли входной текст значение, не вызывая отправки в нем только сценарием Java

0 голосов
/ 25 мая 2018

Я создаю некоторый эффект на входе, поэтому он работает примерно так, если я фокусируюсь на входе, метка этого входа поднимается на 100 пикселей от входа, и если кто-то вводит значение и не фокусирует вход, он все равно остается включенным.сверху, но если вход пуст и пользователь нажимает за пределами ввода, метка вернется в положение снова. Помогите мне достичь этого эффекта, спасибо. Я хочу сделать его похожим на плавающие метки. 

<html>
<head>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

<style>

.form{width:600px; margin:auto; }

.input-conatiner{ width:400px; margin:60px auto ; text-align:center; height:35px ;width:320px;  position:relative; }
.input-conatiner input{position:absolute; background:none; top:0; left:0; height:100%; width:100%;  }
.input-conatiner label{position:absolute; top:0; left:0; z-index:9; transition:300ms ;}
.input-conatiner:hover input + label {color:red; transform:translatey(-150%);}
 
</style>



<body>

<form>

<div class="input-conatiner">
<input type="text"/>
<label>HI there</label>



</div>

<div class="input-conatiner">

<input type="text"/>
<label>HI there</label>



</div>


<div class="input-conatiner">
<input type="text"/>
<label>HI there</label>



</div>



</form>




</body>


</html>

1 Ответ

0 голосов
/ 25 мая 2018

и если ввести значение и сфокусировать ввод, он все равно останется сверху, но если ввод пуст и пользователь щелкнет за пределами ввода, метка снова вернется в положение

То есть вы хотите, чтобы ярлык снова опустился, если пользователь не заполнил поле?И если они что-то заполнили, то это должно остаться выше?

Единственный способ (на полпути) достичь этого только с помощью CSS, это сделать поле ввода required, а затем использовать :validпсевдокласс: 

<html>
<head>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

<style>

.form{width:600px; margin:auto; }

.input-conatiner{ width:400px; margin:60px auto ; text-align:center; height:35px ;width:320px;  position:relative; }
.input-conatiner input{position:absolute; background:none; top:0; left:0; height:100%; width:100%;  }
.input-conatiner label{position:absolute; top:0; left:0; z-index:9; transition:300ms ;}
.input-conatiner:hover input + label,
.input-conatiner input:valid + label {color:red; transform:translatey(-150%);}
</style>
<body>
<form>
<div class="input-conatiner">
<input type="text" required/>
<label>HI there</label>
</div>
</form>
</body>
</html>

Если вам нужно что-то большее, вам, возможно, придется использовать JavaScript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...