单击时将数据输入文本框

Inputting data into text box upon click

本文关键字：文本 输入 数据 单击      更新时间：2023-09-26

我有一个表单，用户可以在其中在聊天室中交谈。我的问题是我有一个用户可以在其中选择图片的图库。

我的问题是用户如何单击 html 链接并为该 html 链接将文本输入到输入中，以便当用户单击显示cat的链接时，它会输入到文本字段中:cat。

这是我到目前为止的形式：

<form method="POST" action="chat.php">
  <input type="text" name="message"></input>
  <input type="submit" />
</form>

这是图库：

<a href="#"><img src="cat.jpg"/></a>

所以再一次，问题是一旦用户单击猫的图像，我如何在文本框中插入文本？

感谢您花时间帮助我解决此问题的人。

如果你使用的是jQuery，你可以做这样的事情：

$('a.cat').click(function()
{
    $('input[name="message"]').val(':cat');
});

在这种情况下，您需要使用以下内容更新链接：

<a class="cat" href="#"><img src="cat.jpg"/></a>

您可以创建一个 js 函数，然后使用锚点调用它以更改输入的值属性。输入类型文本也不应具有结束标记。

function changeChatInput(value) {
  document.getElementById('chatInput').value = value;
}
<form method="POST" action="chat.php">
  <input type="text" name="message" id="chatInput" />
  <input type="submit" />
</form>
<a href="javascript: changeChatInput(':cat');">
  <img src="cat.jpg" />
</a>

下面是JS中的一个解决方案（没有jQuery）：http://jsbin.com/doqedodezo/3/edit?html,js,output

图像触发JS函数并传递应该添加到输入字段中的文本。我在输入中添加了一个 id 来解决这个问题。

我会使用

$('a > img').click(function() {
    var imgName = retrieveImgName($(this).attr('src'));
    $('input[name="message"]').val(':' + imgName);
});
var retrieveImgName = function(imgPath) {
    return imgPath.substring(0, imgPath.indexOf('.'));
};

这样做，您可以提取用于根据img的src属性检索名称的逻辑。因此，如果逻辑由于某种原因而改变，您可以轻松地将其排除在外。

你可以通过使用此 jQuery 语法来完成你的工作。

<script type="text/javascript">
$('a > img').click(function(e){
   e.preventDefault();
   $('input[name="message"]').val(':cat');
});
</script>
相关文章：