JavaScript - Получить текущий сфокусированный элемент, который имеетClass () с JQuery

javascript jquery

775 просмотра

2 ответа

Я знаю, что это простой вопрос для вас, но здесь я с трудом пытаюсь решить свою собственную проблему.

В моем случае у меня есть несколько текстовых полей, которые изменяют цвет границы поля и текста метки, когда само поле фокусируется, и отменяют изменения, когда оно не сфокусировано. Тогда я использовал следующий код: (см. Мою демонстрацию )

$(function() {
  $(".field").focus(function() { /* ... */ });
  $(".field").blur(function() { /* ... */ });
});

Но так как я указываю на класс .field, все элементы, имеющие этот класс, будут затронуты, поэтому я подумал, что должен установить текущий активный элемент с классом, .fieldчтобы другие элементы были исключены. Я использовал приведенный ниже код, но он не работает (и я даже не знаю, прав ли я относительно этой идеи):

var current = $(document.activeElement).hasClass(".field");
$(current).focus(function() { /* ... */ });
$(current).blur(function() { /* ... */ });

Если есть другой способ решить эту проблему, скажите, пожалуйста, как.

Надеюсь, вы могли бы помочь мне.

Благодарю.

Автор: Chain Trap Источник Размещён: 08.11.2019 11:09

Ответы (2)


0 плюса

Решение

Вы можете изменить селектор $ (". Field") на $ (this), чтобы выбрать поле, и $ (this) .next (), чтобы выбрать метку поля внутри функций размытия и фокусировки. Только выбранное поле и следующая метка будут выбраны, смотрите этот фрагмент:

$(function() {
  $(".field").focus(function() {
    /* when field with or without value is focused, add these classes */
    if ($(this).val().length || $(".field").val().length == "") {
      $(this).addClass("field-is-focused");
      $(this).next().addClass("label-is-focused");
    }
  });
  $(".field").blur(function() {
    /* when field with or without value is not focused, remove added classes */
    if ($(this).val().length || $(".field").val().length == "") {
      $(this).removeClass("field-is-focused");
       $(this).next().removeClass("label-is-focused");
    }
  });
});
fieldset {
  border: 2px solid #ccc;
  padding-top: 20px;
  padding-bottom: 20px;
}
.label {
  float: left;
  margin-right: 5px;
}
.field {
  border: 2px solid #ccc;
  padding: 0 5px;
  height: 22px;
  margin-bottom: 10px;
}
.field:focus {
  outline: 0;
  outline-offset: 0;
}

/*---------------------------------*/

.field-is-focused {
  border-color: blue;
}
.label-is-focused {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width"/>
	<title>jQuery - Get current focused element</title>
        <script src="https://code.jquery.com/jquery.min.js"></script>
  </head>
  <body>
	<form>
	  <fieldset>
		<!-- input email type field -->
		<input type="email" class="field">
		<label class="label">Email</label>

		<!-- input password type field -->
		<input type="password" class="field">
		<label class="label">Password</label>
		
		<!-- textarea field -->
		<textarea class="field"></textarea>
		<label class="label">Comment</label>
	  </fieldset>
	</form>
  </body>
</html>

Автор: Calum Размещён: 20.08.2016 10:07

0 плюса

Попробуйте использовать CSS-свойство focus для класса .field.

.field :focus{
/*your style change*/
}

Это может устранить функции фокусировки / размытия. Надеюсь, это поможет!

Автор: bhattshru Размещён: 20.08.2016 10:15
Вопросы из категории :
32x32