如何根据焦点切换输入类？

debugcn 发表于 Dev

诺尔德

我有一个非常基本的联系表单，它有 3 个输入，我需要根据它们是否有焦点来调整样式。

使用我目前拥有的 JavaScript，我只能在单击事件时获得所需的结果，但通常不会在输入具有焦点时获得所需的结果。例如，我想切换指定的“比例”类，如果他们还要通过选项卡浏览输入，而不是仅仅点击或点击它们的内部或外部。为此，我认为根据焦点切换类将是一个更好的解决方案，但使用 .focus() 或 .is(":focus") 没有运气。

此外，在移动设备上的表单输入之外点击不会像在桌面浏览器上点击一样删除“缩放”类。不知道如何处理。

任何帮助将非常感激。

JSFiddle

var $input = $('input, textarea');

// Remove focus class if user clicks outside it
$(window).on('click touch', function() {
  if ( $input.parent().hasClass('scale') ) {
    $input.parent().removeClass('scale');
  }
});

// Scale form container on click
$input.on('click touch', function(event) {
  event.stopPropagation();
  $(this).parent().addClass('scale');
  $input.not($(this)).parent().removeClass('scale');
});

* {
  font-family: Montserrat;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

body {
  background-color: rgba(230,232,235,1);
}

/* Section container */
#form-section {
	padding: 5%;
}

/* Form */
form {
	margin: 0 auto;
	width: 400px;
}

/* Form - hover */
form > div:hover > div {
	opacity: 0.65;
	transition: 0.3s ease;
}

/* Form field containers */
form > div > div {
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,10,20,0.10), 0 6px 10px rgba(0,10,20,0.06);
	margin: 0 auto 30px auto;
	position: relative;
	transition: 0.3s ease;
  width: 85%;
}

/* Form field containers - hover */
form > div > div:hover {
	opacity: 1;
	transition: 0.3s ease;
}

/* Form field scale class*/
form > div > div.scale {
	box-shadow: 0 3px 8px rgba(0,10,20,0.12), 0 10px 20px rgba(0,10,20,0.1);
	opacity: 1;
	transform: scale3d(1.05,1.05,1);
	transition: 0.3s ease;
}

/* Form label */
label {
	background-color: rgba(242,245,248,1);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	color: rgba(165,175,185,1);
	display: block;
	font-size: 12px;
	font-weight: 500;
	height: 30px;
	letter-spacing: 0.1em;
	line-height: 30px;
	width: 100%;
}

/* Inputs */
input,
textarea {
	border: none;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	color: rgba(115,125,135,1);
	font-size: 16px;
	line-height: 1.6em;
	width: 100%;
}

/* Message input */
textarea {
	min-height: 100px;
	resize: vertical;
}

/* Submit button */
input[type="submit"] {
	background-color: mix(white, rgba(87,37,18,1), 20%);
	border-radius: 4px;
	color: white;
	display: block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 auto;
	text-transform: uppercase;
	transition: 0.3s ease;
	-webkit-appearance: none;
	width: 120px;
}

/* Submit button - hover */
input[type="submit"]:hover {
	background-color: rgba(87,37,18,1);
	box-shadow: 0 2px 8px rgba(0,10,20,0.25), 0 8px 12px rgba(0,10,20,0.12);
	cursor: pointer;
	transform: translate3d(0,-2px,0);
	transition: 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="form-section">

  <!-- CONTACT FORM -->
  <form>
    <div>
      <!-- NAME -->
      <div class="input_scale">
        <label for="name">NAME</label>
        <input type="text" id="name" name="user_name">
      </div>
      <!-- EMAIL -->
      <div class="input_scale">
        <label for="email">EMAIL</label>
        <input type="email" id="email" name="user_email">
      </div>
      <!-- MESSAGE -->
      <div class="input_scale">
        <label for="message">MESSAGE</label>
        <textarea id="message" name="user_message"></textarea>
      </div>
    </div>
    <!-- SUBMIT -->
    <input type="submit">
  </form>
  
</section>

克拉姆

而不是 using click touch，在你的第一个函数中使用blur

该模糊当一个元素失去焦点事件。

$input.on('blur', function() {
    if ( $input.parent().hasClass('scale') ) {
        $input.parent().removeClass('scale');
    }
});

第二种，使用 focus

该焦点当一个元素已收到焦点事件。

$input.on('focus', function(event) {
    event.stopPropagation();
    $(this).parent().addClass('scale');
    $input.not($(this)).parent().removeClass('scale');
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。