Question

我的网页包含<input>和<span>。

我不知道如何处理用户在输入中写入的文本，将显示为span。

代码（效果不佳）：

HTML：

<h1>Lets talk with SpongBob!</h1>
<span>Say "hello":</span>
<form name="frm"><input name="question" type="text"><input  id="submit" type="submit" value="Submit"></form>
<div id="igool"><span id="talk"></span></div>
<div id="Triangle"></div>
<img src="http://static.tumblr.com/f1bbfdf0fd794b1cf8d243d65644be01/i0ldeup/bURmj2ccf/tumblr_static_spongebob.jpg"/>

CSS：

 body {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
h1 {
  text-align: center;
}
img {
  width: 300px;
  margin-left: 20%;
}
input {
  position: absolute;
  width: 10%;
  margin-left: 45%;
  border: 2px solid black;
  border-radius: 4px;
  background-color: lightgray;
}
#submit {
    margin-left: 57%;
    width: 5%;
}
span {
  position: absolute;
  margin-left: 37%;
  }
#Triangle {
  width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-top: 30px solid lightgray;
  margin-top: -0.5%;
  margin-left: 41%;

}
#igool {
  width: 120px;
  height: 100px;
  background-color: lightgray;
  border-radius: 100%;
    margin-left: 38%;
  margin-top: 8%;
}
#talk {
  margin-left: 2%;
  margin-top: 3%;
}

的Javascript

if (document.forms['frm'].question.value == "hello") {
    document.getElementById("talk").innerHTML="Hello you to!";
}
else {
    document.getElementById("talk").innerHTML="WhatEver...";
}

Answer 1

如果我正确地关注您，您需要JavaScript事件。查找blur()或keyup()，应该这样做。您需要将它们连接到输入标记。

Answer 2

您不必实际提交表单，如果您获得的只是JavaScript，那么请使用此类代码：

window.onload = function() {
    var oForm = document.forms["frm"];
    var oTalkSpan = document.getElementById("talk");
    oForm.onsubmit = function() {
        if (this.elements["question"].value == "hello") {
            oTalkSpan.innerHTML="Hello you to!";
        }
        else {
            oTalkSpan.innerHTML="WhatEver...";
        }
        return false;
    };
};

Live test case

如果您确实选择提交表单，则必须使用PHP，ASP.NET或其他许多服务器端语言，但不能使用客户端脚本。

Answer 3

试试这个：

演示：Fiddle

document.forms['frm'].onsubmit = function() {
    if (document.forms['frm'].question.value == "hello") {
        document.getElementById("talk").innerHTML="Hello you to!";
    }
    else {
        document.getElementById("talk").innerHTML="WhatEver...";
    }
    return false;
}

Answer 4

你可以用jquery这样只用三行：

$('input#one').keyup(function(){

$('span#test').html($(this).val());

})

和html：

<span id="test"></span>
<br/>
<input type="text" id="one"/>

以下是DEMO

如何通过用户输入更改文本？

4 个答案: