点击图片并更改文本

U在页面上有2张图片和文本框（php）点击图片并更改文本

当你点击图片我想改变文字。

我首发，请发送一个代码，是不是很难理解。

<body> 
    <img src="bier1.jpg" alt="u mad" onclick= ""> 
    <img src="bier2.jpg" alt="u mad" onclick= ""><br> 

    <form> 
    <input type="text" name="Example"/> 
    </form> 
</body>

来源

2012-06-25 user1479850

你想只使用PHP？ – Subhajit

是我的权利，你想改变文本框的文本？如果是下面的代码：

<body> 
     <img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'"> 
     <img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br> 

     <form> 
     <input type="text" name="Example"/> 
     </form> 
    </body>

来源

2012-06-25 12:03:05 yannisgu

我猜他们的意思是说，页面是作为一个PHP页面。我会纯粹用JavaScript来做这件事。在伪代码中，我会执行以下操作。

创建javascript函数
函数查找输入使用名称
功能设置输入的文本，无论你喜欢（这可能是在此基础上被点击图像

标识deffinately建议看W3Schools的网站，这将带给你无限的简单的例子，让你开始。

也开始基本和您的方式工作，如果你不能得到这一切WO一次点击，点点滴滴，当你点击它时，让你的onclick发出警报，然后在你的onclicks正在工作后尝试设置文本。

来源

2012-06-25 11:58:45

首先，您需要添加id到文本字段：

<input type="text" name="Example" id="myTextBox" />

然后，你可以做这样的事情：

<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" /> 
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />

这是不是很优雅，虽然，你必须把它应用到所有图像而无需改变的标记，有这样的JavaScript：

window.onload = function() { 
    var oTextbox = document.getElementById('myTextBox'); 
    for (var i = 0; i < document.images.length; i++) { 
     document.images[i].onclick = function() { 
      oTextbox.value = this.alt; 
     }; 
    } 
};

Live test case of above code。

您也可以通过应用类，这些图像有只对某些图像上面的代码工作，你想要的“点击”，例如：

<img src="bier1.jpg" alt="u mad" /> 
<img class="clickable" src="bier2.jpg" alt="u mad 2" />

只具有第二个原因文本框来改变，有这样的代码：

window.onload = function() { 
    var oTextbox = document.getElementById('myTextBox'); 
    for (var i = 0; i < document.images.length; i++) { 
     var image = document.images[i]; 
     if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) { 
      image.onclick = function() { 
       oTextbox.value = this.alt; 
      }; 
     } 
    } 
};

Updated fiddle to demonstrate。

来源

2012-06-25 12:02:57

不需要在字段中添加一个id，只需使用一个名称就可以轻松完成此操作，javascript将返回具有该名称的元素数组，但如果它是页面上的唯一元素，则可以轻松地将其选为0数组的索引。 –

@Jon如果文本框是独立的，即不是表单的一部分，并且看起来像这里的情况。添加'id'看不到任何错误。 –

使用身份证但没有必要，没有错。为什么它需要成为表单的一部分来按名称搜索？为什么不能使用document.getElementsByName（“Example”）;这将返回dom中具有名称Example的元素数组。从他的代码中只有一个这样的事件，因此获得数组的第一个元素将返回输入元素。 –

你需要使用JavaScript，我宁愿给使用jQuery javascript代码，所以请做一个快速谷歌搜索上jQuery。

<script type="text/javascript"> 
    $(function(){ 
     //You need to bind click events to your images and probably 
     $("img.has-message").click(function(){ 
      var msg = $(this).attr("data-msg"); 
      //get the message from that particular image 
      $("#text_box_id").attr("value",msg); 
      //changes the value of the text box to display the message 
      return false; 
     }); 
    }); 
</script>

所以你将此代码放在网页的<head></head>标签

此代码将工作完全假设你可以改变你的HTML看起来像这样：

<body> 
    <img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"> 
    <img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br> 
    <form> 
     <input type="text" id="text_box_id" name="Example"/> 
    </form> 
</body>

请记住，jQuery的需要包含在您的页面上才能工作。

来源

2012-06-25 12:03:07

点击图片并更改文本

回答

相关问题