Question

假设我有一个输入的人名和另一个输入的公司名：

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

如果我开始在nameofperson输入上写东西。我想清除nameofbusiness的价值，如何使用CSS做到这一点？

Answer 1

您无法通过CSS进行操作，但是您可以使用javascript或jquery来实现。

使用Java脚本：

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

Answer 2

您无法使用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">

Answer 3

为两个输入添加相同的类名。例如，我添加了“ nameofSomething”类。

和jQuery

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

您可以更改按键以更改，模糊...或任何您想要的东西。

Answer 4

这基本上是通过javascript而不是css完成的。顾名思义，CSS是用于样式设计的。您可以使用onfocus方法通过javascript轻松做到这一点：

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

如果我使用CSS在其他输入上写东西，如何清除输入的值？

4 个答案: