Как сохранить значение текстового поля при нажатии на другое поле?

Question

Я работаю над проверкой для моего проекта jquery, и одно из требований заключается в том, чтобы при щелчке по нему оставалось значение по умолчанию (там, где в поле указаны имя и фамилия). По сути, если я введу имя в поле, заполнитель (имя или фамилия) исчезнет, ​​но если я сотру то, что написал, и пропущу, он появится снова. Дайте мне знать, если я не имею смысла. Вот что у меня есть:

<meta charset="UTF-8">

<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>


    $(document).ready(function() {


        $("#input").submit(function(e) {
            e.preventDefault(); 

            if ($("#firstName").val() == '') {
                alert("Please enter your name and submit again");

                return false;



            } else {

                $("#msg").text("Your name is: " + $("#firstName").val() + $("#lastName").val());

            }
        });

    }); 

</script>

<form id="input" method="post" action="">
    <div>
        <label for="first_name" class="label">first name</label>
        <input type="text" placeholder="first name" id="firstName" name="firstName">
    </div>
    <div>
        <label for="last_name" class="label">last name</label>
        <input type="text" placeholder="last name" id="lastName" name="lastName">
    </div>

    <input type='submit' value='Submit' name="submit" id='submitme'>
    <p id="msg"></p>

</form>
<p id="result"></p>

Answer 1

Я не уверен, правильно ли я вас понял, но вот решение, которое использует метку внутри ввода.

.my-awesome-input-wrapper {
  display:          inline-block;
  
  padding:          0.2em;
  background-color: white;
  border:           1px solid #A9A9A9;
}

.label {
  color: #A9A9A9;
}

.input {
  padding:          0;
  border:           none;
  outline:          none;
  background-color: transparent;
}

<form id="input" method="post" action="">
    <div class="my-awesome-input-wrapper">
        <label class="label" for="first_name" >First name:</label>
        <input class="input" type="text" id="first_name" name="first_name">
    </div>
    <div class="my-awesome-input-wrapper">
        <label class="label" for="last_name">Last name:</label>
        <input class="input" type="text" id="last_name" name="last_name">
    </div>

    <input type='submit' value='Submit' name="submit" id='submitme'>
    <p id="msg"></p>
</form>
<p id="result"></p>

Кстати: нормальное поведение для ввода - заполнитель текста исчезает, если вход содержит текст. В противном случае вам придется пересекать тексты, что затруднит чтение. Используйте элемент label для сохранения текста, но имейте в виду, что вы не размещаете его над напечатанным текстом / значением.

Answer 2

Нет проблем в коде. И совершенно правильно, что заполнитель (имя или фамилия) будет отображаться в полях ввода, когда вы стираете то, что написали в полях ввода. Поскольку, когда в поле ввода ничего не написано, атрибут placeholder будет работать.