Как очистить значение ввода, если я напишу что-то на другом входе с помощью css?

Предположим, у меня есть имя человека ввода и другое название компании ввода:

<input name="nameofperson" id="nameofperson" class="form-control">
<input name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">

Если бы я начал что-то писать на вводе имени человека. Я хочу очистить значение nameofbusiness, как это сделать с помощью CSS?

1
0
76
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

What you want to do is not possible through the Css,but you can do that using javascript or jquery.

С Javascript:

var nameofperson  = document.getElementById('nameofperson');
var nameofbusiness = document.getElementById('nameofbusiness');
nameofperson.oninput = function() {
  nameofbusiness.value = '';
}
<input type="text" name="nameofperson" id="nameofperson"  class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">

С помощью JQuery:

$(document).ready(function(){
  $('#nameofperson').keyup(function(){
    $('#nameofbusiness').val('');
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="nameofperson" id="nameofperson"  class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">

В основном это делается с помощью javascript, а не css. CSS, как следует из названия, предназначен для стилизации. вы можете легко сделать это с помощью javascript, используя метод onfocus:

<input type="text" onfocus="document.getElementById('nameofbusiness').value = ''">

Вы не можете очистить значение поля ввода с помощью CSS. Однако для этого вы можете использовать JavaScript / JQuery. Найдите рабочий пример.

$("#person").on("keyup", function(){
$("#business").val("");
});
input {
width: 350px;
height: 30px;
text-indent: 5;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="person" placeholder="Enter name of person">
<input type="text" id="business" placeholder="Enter your Business">

Вы добавляете одно и то же имя класса для обоих входных данных. Для примера я добавляю класс nameofSomething.

и jquery

$(".nameofSomething").keypress(function () {      
    var id = $(this).attr('id')
    var text = $("#" + id).val();
    $(".nameofSomething").val('');
    $("#" + id).val(text);
});

Вы можете изменить нажатие клавиш, чтобы изменить, размыть ... или что угодно.

Другие вопросы по теме