Question

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

使用我目前拥有的JavaScript，我只在点击事件时获得所需的结果，但在输入一般具有焦点时却不能。例如，我想切换指定的＆＃34;比例＆＃34;如果他们也要通过输入标签，而不是仅仅点击或点击它们的内部或外部。为此，我认为基于焦点切换类将是一个更好的解决方案，但使用.focus（）或.is（＆＃34;：focus＆＃34;）没有运气。

此外，在移动设备上输入表单外部不会删除＆＃34;比例＆＃34;类似点击的类在桌面浏览器上执行。不知道如何处理。

非常感谢任何帮助。

JSFiddle

＆＃13;

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');
});

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

在第一个函数中使用click touch

而不是blur

当元素失去焦点时会触发blur事件。

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

在第二个中，使用focus

当元素获得焦点时会触发focus事件。

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

Answer 2

您可以使用jquery .focus（）事件。试试这个：

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

Answer 3

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

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

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

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

3 个答案: