Question

我试图在Javascript中的文本框后显示innerHTML，但它总是在文本框下面，如下所示：

[文本框]

请输入用户名

但我希望它像这样

[textbox]请输入用户名

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>his Website</title>

<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="libs/JQuery.js"></script>
<script type="text/javascript" src="libs/effex.js"></script>
<script type="text/javascript" src="libs/slide.js"></script>
<script type="text/javascript" src="libs/jquery-ui.js"></script>

<script type="text/javascript">
function chck() {
    var name = document.getElementById('name').value;
    var msg = document.getElementById('msg');
    var namex = document.getElementById('name');
    if (name == '') {
        namex.innerHTML=namex.innerHTML+msg.value;
        document.getElementById('msg').innerHTML = "Please enter name to proceed...";
return false;
    }
}
</script>
<body bgcolor="silver">
<table width="1500" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img src="images/bann3r.jpg" class="copy" width="1500" height="150" usemap="#Map" border="0" /></td>
  </tr>
</table>
<center>

<div id="bod">
<br />

<legend class="contact">Contact Me!</legend>
<fieldset>
<form name="contact">
<br />
<br />
<br />
<label>Name:</label><input name="name" type="text" class="nameTxt" id="name" maxlength="20"/><label id="msg"></label>
<BR />
<label>Email:</label><input type="email" name="email" class="nameTxt" />
<BR />
<label>Subject:</label><input type="text" name="subject" class="nameTxt" />
<BR />
<label>Message:</label><textarea name="msg" class="nameTxt"></textarea>
<Br />
<br />
<input type="submit" value="Send Message" class="send" onClick="return chck()"/>
</form>
<fieldset>
</div>

<map name="Map" id="Map">
  <area shape="rect" coords="177,62,274,104" href="index.html" />
  <area shape="rect" coords="322,52,534,111" href="gdesigns.html" />
  <area shape="rect" coords="1305,58,1478,106" href="contactme.html" />
</map>
</body>


<center>
<div id="hoverdiv">Contact</div>

<br />
<br />
<br />
<footer><font face="Arial, Helvetica, sans-serif" hovertext="Copyright Yousef Bhatti">©Copyright 2013 Yousef Bhatti</footer></font>
</center>
</html>

Answer 1

确保给该标签的css是

#msg
{
  position:relative;
  display:inline-block; //if this doesn't work, give float:right;
}

Answer 2

Check This 希望这就是您所需要的。

我建议不要强烈使用<br>标签。请仔细阅读最新的HTML5语义，然后使用这些标签。

如何在Javascript中显示文本框后的innerHTML

2 个答案: