javascript - 使用 Javascript 按钮更改搜索文本

标签 javascript html

我知道这看起来简单而且过时,但我在任何地方都找不到合适的例子。

我的目标是通过将文本添加到用户使用 JavaScript 输入的内容的开头来编辑搜索栏。

例如,用户输入“Pie”,搜索栏下方有三个按钮,用户可以选择“Apple”、“Banana”或“Squash”。单击任何按钮时,应将文本添加到饼图的开头,例如单击“香蕉”会导致搜索栏被修改为“香蕉派”。

我只是想学习如何在 JS 中执行此操作,但我在任何地方都找不到合适的示例,如果有人能指出我合适的位置,我将不胜感激。

最佳答案

检查一下。

function SetValue(ts) {
  var txt = document.getElementById("searchabar");
  var n = txt.value.indexOf(":");
  var text = txt.value;
  if (n > 0) {
    var text = txt.value.substring(n + 1);
  }
  txt.value = ts + ":" + text;
}
<!DOCTYPE html>
<html lang="en">

<head></head>

<body>
  <input type="" name="" placeholder="Search bar" id="searchabar">
  <input type="button" name="" value='Apple' onclick="SetValue('Apple')">
  <input type="button" name="" value='Squash' onclick="SetValue('Squash')">
  <input type="button" name="" value='Banana' onclick="SetValue('Banana')">
  <script type="text/javascript">
  </script>
</body>

</html>

关于javascript - 使用 Javascript 按钮更改搜索文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60255415/

相关文章:

javascript - 在 Jasny Bootstrap 中使用 fileinput.js 时,选择文件后自动提交表单

javascript - 使用 Javascript 获取特定目录中的所有文件名

javascript - 向 Phaser 3 游戏添加场景不起作用

html - 有没有办法让字段集的宽度只与其中的控件一样宽?

html - 如何仅垂直偏移背景位置?

php - undefined _post 使用图像作为提交

javascript - 将 Google 日历数据与基于 D3.js 的日历集成

javascript - 动态调整 pixi 舞台的大小及其在窗口调整大小和窗口加载时的内容

javascript - jquery mobile 将我的屏幕大小设置为 100%

html - 如何使整个 DIV 成为链接