单击区域时更改输入值答案

【问题标题】：Change an input value when clicking on an area单击区域时更改输入值
【发布时间】：2012-07-23 13:54:19
【问题描述】：

我有一张不同区域的 HTML/PHP 图像。当我单击我希望上面的输入字段更改的区域之一时。我怎么做？尝试使用普通的 $variable，但我也无法正常工作。

我对 HTML 很陌生。

提前致谢！

<input type="text" name="position" size="10" value="">

<img style="margin: 50px 500px" src="pic.jpg" width="500" height="200" alt=":("
usemap="#cabmap" />

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" *something here mby?* />



<html>
<head>
<title>Pos</title>
</head>

<body>

<form method="post" action="process.php">
<fieldset>
<legend><strong>ChosePos</strong></Legend>

<td style="padding-left: 40px"><b>Position</b></td>
<input id="position" type="text" name="position" size="10" value="Hellope"</input>
<br />
<img src="pic.jpg" width="500" height="200" alt="Position map" usemap="#map" />
<map name="map">
  <area shape="rect" coords="0,0,82,126" alt="CA1" onclick="javascript:simply();" />
  <script type="text/javascript">
    function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  </script>

  </map>


</fieldset>

<input style="pading-top: 20px" type="submit" value="Send report" />



</form>
</body>
</html>

现在我已经走到这一步了，但是当我点击该区域时没有任何反应...

我不知道出了什么问题。请帮助我。

【问题讨论】：

你需要使用 jQuery 来实现它。谷歌会帮助你
显示一些代码供参考...
@asprin jQuery 不是必要的，一些纯原生的 javascript 就足够了。
@asprin，jquery 让它变得更简单的事实是没有问题的，但是“你需要使用 jquery”的说法是完全不正确的。
@freefaller 哦..不是从那个角度看的。我应该使用“You can”而不是“You will”

标签： php html image input areas

【解决方案1】：

是的，您可以使用外部 JavaScript 库 jQuery：

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="$('#position').val('Hello')"/>

或者您可以使用普通的 JavaScript：

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="javascript:simply();"/>
<script type="text/javascript">
function simply(){
 var box = document.getElementById("position");
 box.value="Hello"; 
}    
</script>

还记得给你的文本框添加一个 id 属性。

【讨论】：

您也可以使用纯 JavaScript 代替 jQuery，尽管这可能会使代码有点长。您也可以通过name 属性引用input 元素，尽管id 属性更方便（特别是如果有多个元素具有相同的name）。
位置前为什么是#？在我使用上面的代码并在输入/文本框中输入 name="position" 之后它应该工作还是我也需要用 JQuery 做一些事情？抱歉所有问题。
好吧，javascript 看起来不错。因为我很擅长Java。非常感谢。
嗯，我已经挣扎了一段时间，但我尝试的任何方法似乎都不起作用。我制作了上面的 javascript 和所有其他东西，但是当我点击该区域时没有任何反应。
@user1516844，请参阅我的回答，了解为什么我认为您的更改不起作用。 user1474090 在这里给出的答案是回答您的原始问题，我的只是指出语法错误，如果/当您决定将问题标记为已接受时，请记住这一点（即应该是这个答案，不是我的）

【解决方案2】：

更新 - 如果这仍被标记为“正确”答案...

我尝试向 OP 解释我的答案是基于他们在实施 user1474090 建议的更改时引入的错误。因此，他们应该将来自 user1474090 的答案标记为“正确”答案...而不是这个答案。

原答案

针对您的更新问题，您有几个语法错误。

首先，您的<input id="position" 格式错误，所以请更改...

<input id="position" type="text" name="position" size="10" value="Hellope"</input>

进入以下两行中的一个...

<input id="position" type="text" name="position" size="10" value="Hellope"></input>
<input id="position" type="text" name="position" size="10" value="Hellope"/>

其次，您的 JavaScript 函数没有右大括号 }，所以更改...

<script type="text/javascript">
  function simply(){
  var box = document.getElementById("position");
  box.value="Hello";
</script>

到...

<script type="text/javascript">
  function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  }
</script>

我还建议您将<script> 块移动到页面的<head> 部分，而不是成为<body> 的一部分。这对于它的工作并不重要，但它是在页面中包含脚本的首选方式。

我可以彻底推荐 FireBug for Firefox 或使用 Chrome 和 IE8/9 中的开发人员组件（两者都按 F12）。这些将很快让您发现这样的问题。

【讨论】：