Как я могу добавить что-нибудь в поле ввода? - PullRequest
Новая
       6

Как я могу добавить что-нибудь в поле ввода?

1 голос
/ 02 августа 2020

Я хочу добавить текст в поле ввода. Я пробовал следующий код: 

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn1").click(function() {
        $("input").append(" <b>Appended text</b>.");
      });
    });
  </script>
</head>

<body>

  <input type="text">This is a paragraph.</input>

  <button id="btn1">Append text</button>

</body>

</html>

Но ничего не делает. Когда я нажимаю «Добавить текст», ничего не происходит. Итак, как я могу добавить что-нибудь в поле ввода?

Ответы [ 7 ]

0 голосов
/ 02 августа 2020

На самом деле, если вы добавите любой текст между <input></input>, он не будет виден. Вы можете присвоить значение тегу input только в том случае, если хотите отображать любой текст во вводе.

Когда вы вводите любой текст между тегами input open и close в html браузере автоматически преобразует это как это .. 

<input type="text">This is a paragraph.</input>

Преобразовано в 

<input type="text"></input>
This is a paragraph.

Но это применимо только для stati c html. Браузер не может преобразовать динамический c текст, добавленный с использованием JQuery.

В вашем примере вы добавляете правильно. После нажатия кнопки «Добавить текст», когда вы увидите элемент html using inspect, вы увидите это 

 <input type="text"><b>Appended text</b>.</input>
 This is a paragraph.

Но добавленный текст не отображается, потому что он находится внутри тега ввода.

Так технически ничего внутри тега ввода не видно. Вы должны указать значение для ввода, если хотите отображать его на входе.

Чтобы установить значение ввода с помощью jquery, вы можете использовать это 

$("input").val("any text");
0 голосов
/ 02 августа 2020

Это так просто, но ни один другой ответ не является правильным по существу. Это небольшие исправления:

  1. .append используется для добавления любого текста в парные теги. Поэтому используйте вместо него .val().
  2. Входной тег - это единственный тег, поэтому </input> не требуется. Значение внутри ввода будет определяться параметром значения внутри тега ввода. <input type="text" id="inp" value="This is a paragraph.">.

Итак, окончательный код выглядит так: 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("input").val( $("input").val() + " Appended text" );
  });
});
</script>
</head>
<body>

<input type="text" id="inp" value="This is a paragraph.">
<button id="btn1">Append text</button>

</body>
</html>
0 голосов
/ 02 августа 2020

Вы можете использовать метод val для заполнения текста в поле ввода.

Это должно работать: 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#input").val(" <b>Appended text</b>.");
  });
});
</script>
</head>
<body>

<input type="text" id="input">This is a paragraph.</input>

<button id="btn1">Append text</button>

</body>
</html>
0 голосов
/ 02 августа 2020
Теги

input не предназначены для размещения содержимого между ними. Итак, вместо этого вы должны сделать: 

<input type="text" value="This is a paragraph." />

При этом вы можете использовать событие onclick следующим образом: 

<button id="btn1" onclick="$('input').val($('input').val() + ' <b>Appended text</b>.')">Append Text</button>

Фрагмент кода: 

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" value="This is a paragraph." />

<button id="btn1" onclick="$('input').val($('input').val() + ' <b>Appended text</b>.')">Append Text</button>

</body>
</html>
0 голосов
/ 02 августа 2020

Попробуйте использовать .val () в jquery, например 

 $("input").val("<b>Appended text</b>.");
0 голосов
/ 02 августа 2020

Чтобы установить значение поля ввода, вы должны использовать метод val после того, как вы выбрали этот элемент. и передайте в качестве аргумента новое значение, которое вы хотите заполнить в этом элементе ввода 

$('#btn1').on('click', function() {
   $('#paragraphField').val('This is the new value');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="paragraphField" type="text">This is a paragraph</input>

<button type="button" id="btn1">Append text</button>

Метод append используется, когда вы хотите вставить элемент как дочерний для другого элемента. 

$('.btn').on('click', function(){
  $('.parent').append('<h2>new child</h2>');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <p>this will contain all inserted element</p>
</div>


<button type="button" class="btn">Append Child</button>
0 голосов
/ 02 августа 2020

Правильный способ добавить к значению ввода в JQuery - использовать функцию .val(). Кроме того, для выбора входа лучше использовать id: 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#inp").val($("#inp").val()+" <b>Appended text</b>.");
  });
});
</script>
</head>
<body>

<input type="text" id="inp">This is a paragraph.</input>

<button id="btn1">Append text</button>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...