Question

我正在尝试制作一个可用作闪存卡的网络应用，但我需要能够将用户输入的内容添加到教科书中并将其添加到页面中。这是我发现的，但我想要嵌入文本。

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>textBoxes.html</title>
 <script type = "text/javascript">
  // from textBoxes.html
  function sayHi(){
  var txtName = document.getElementById("txtName");
  var txtOutput = document.getElementById("txtOutput");
  var name = txtName.value;
  txtOutput.value = "Hi there, " + name + "!"
  } // end sayHi
 </script>
 <link rel = "stylesheet"
   type = "text/css"
   href = "textBoxes.css" />
 </head>
 <body>
 <h1>Text Box Input and Output</h1>
 <form action = "">
  <fieldset>
  <label>Type your name: </label>
  <input type = "text"
    id = "txtName" />
  <input type = "button"
    value = "click me"
    onclick = "sayHi()"/>
  <input type = "text"
    id = "txtOutput" />
  </fieldset>
 </form>
 </body>
</html>

Answer 1

结帐AngularJS。它可以做你想要的。并且更多！

＆＃13;

var app = angular.module('app', []);

app.controller('AppCtrl', function($scope) {
  $scope.name = "";
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="AppCtrl">
  <input type "text" placeholder="Enter your name" ng-model="name" />

  <h3>Hello<span ng-show="name">, </span>{{name}}!</h3>
</div>

＆＃13;

Answer 2

编辑：您也可以使用JQuery：Here's a fiddle

如果您不想使用Angular，则可以使用：

  function writeToElement(id, value){
    var target= document.getElementById("id");
    if (target) {
        target.innerHTML = value;
        return target;
    } else {
        return false;
    }
  }

然后，您可以将onClick设置为writeToElement(someId, this.value)，其中someId是您要更改的元素的ID。

如何设置我的网页以从文本字段中获取输入并将其用作页面上的新文本？

2 个答案: