Question

我想知道是否可以创建一个文本输入，用户可以在其中输入一些文本，然后立即将它们显示在页面上，与twitter一样。我知道警报窗口或提示窗口，但是我需要一些不同的东西，在网站上输入文本。

希望可以用JavaScript完成。

Answer 1

在输入字段中使用 .keyup（），然后替换输出div的内容。

$(".div-input").keyup(function() {
  $(".output").html($(this).val());
});

.output {
  margin-top: 20px;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="div-input" />

<div class="output">
</div>

如果要在提交时显示输入，则可以在表单标签上附加.submit（）事件，然后在div上使用 appendTo 插入多个元素；

$(".form-input").submit(function(e) {
  e.preventDefault();

  var value = $(".div-input").val();

  $("<div class='outputs'>" + value + "</div>").appendTo($(".output"));
});

.output {
  margin-top: 20px;
}

.outputs {
  padding: 20px;
  font-size: 2em;
  border: 1px solid black;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-input">
  <input class="div-input">
  <button type="submit">Submit</button>
</form>

<div class="output"></div>

Answer 2

您可以使用它在页面上的任意位置显示文本

  <input id="input-name" oninput="outputname.value = this.value">
  <output id="outputname" name="outputname" for="input-name"></output>

您可以here对其进行测试

Answer 3

如果在输入中添加事件监听器，则可以使用它来更改页面输出区域中的文本。像这样：

const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('input', (e) => {
  output.innerHTML = input.value;
});

<div id="output"></div>
<input type="text" id="input">

Answer 4

HTML：

<p>Input:</p><input id="input" type="text">
<p>Output:<span id="output"></span></p>

Javascript：

// Function To Select Element

function $(element) {
  return document.querySelector(element);
}

// We will get the input when calling this function
function getInput() {
  return $('#input').value;
}

// The output will be displayed
function output() {
   $('#output').innerHTML = getInput();
}

// This function will start our code
 function init() {
   output();
 }

// On keyup our code will initiate

$('#input').addEventListener('keyup', init);

您可以在这里进行测试：https://codepen.io/anon/pen/ReyGaO?editors=1111

Answer 5

人们不赞成您，因为这可以通过非常基本的JavaScript 来完成，而这样的问题非常少见，因为任何人只要学习基本的JavaScipt课程，都可以做到这一点。

从理论上讲：您可以在html页面上放置一个输入元素和一个按钮，以及一个空的div。 您可以为按钮或输入设置事件，以便在键入时进行实时更新，并编写事件处理程序功能来更改空div的内容。您可以设置其内容或添加一个新孩子，这样以前的内容仍然保留。

实际示例：（以下代码位于https://codepen.io/bradib0y/pen/YJLGrb上）

<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new post.</p>

<input id="NewPostField" type="text" value="Some text">
<button onclick="myFunction()">Add new post</button>

<div id="Posts"></div>

<script>
function myFunction() {
    var NewPostField = document.getElementById("NewPostField");
    var newPost = document.createElement("p");

    newPost.innerHTML = NewPostField.value;

    var Posts = document.getElementById("Posts");
    Posts.appendChild(newPost);
}
</script>

</body>
</html>

Answer 6

您可以这样做

<input id="mainInput" oninput="output.value = this.value">
<output id="output" name="output" for="input-name"></output>

click here to view in jsFiddle

在页面上输入和输出文本

6 个答案: