时间戳

首页 > 解决方案 > 表单输入名称 (Instagram)

html - 表单输入名称 (Instagram)

问题描述

我是 HTML/CSS 新手，遇到一个问题，我无法通过谷歌搜索。

我设置了一个搜索框，可将您带到谷歌。

<form action="https://www.google.co.uk/search"target="_blank">
        <input type="text" name="q">
        <button>Search Google</button>
    </form>

这适用于谷歌，你可以输入搜索，点击按钮，它会带你到谷歌搜索。

但是当我对 Instagram 尝试相同的操作时，它会将我带到一个错误页面。

    <form action="https://www.instagram.com/explore/tags/"target="_blank">
        <input type="text" name="q">
        <button>Search instagram</button>
    </form>

例如，如果您输入#Coding，它会将您带到此页面： https ://www.instagram.com/explore/tags/?q=%23coding

而不是这个页面： https ://www.instagram.com/explore/tags/coding/

不知道我做错了什么，请有任何帮助我的建议:)

标签： htmlformsinput

解决方案

下面是一种方法，似乎可以满足您的书面要求；解释在代码中作为注释：

// defining a named handler for the <form> element's submission, using
// Arrow syntax, and passing the Event Object automagically from the
// (later) use of EventTarget.addEventListener():
const formHandler = (event) => {
  // here we make use of the event.preventDefault() method to
  // prevent the <form> from being submitted:
  event.preventDefault();
  // we get a reference to the current <form> element to which the
  // event-handler is bound:
  let form = event.currentTarget,
    // an Object of functions to handle the submission process,
    // based on the supplied attribute-value of the custom
    // data-* attribute in the <form> tag:
    format = {
      getParameters: function() {
        // if GET parameters are used then we can simply
        // submit the <form> programatically, taking
        // advantage of the fact that programmatic events
        // don't call event-handlers by default, so this
        // submission bypasses the <form> element's
        // submit-handler:
        form.submit();
      },
      rest: function() {
        // if we're accessing a REST API, then we simply
        // use Window.open(), and pass the relevant URL string;
        // this function has access to the variables declared
        // outside of itself, so here we create the URL by
        // retrieving the path from the <form> element's
        // action attribute and concatenating that with the
        // trimmed value of the <input> element with the
        // name of 'q' (this is not designed to handle multiple
        // words, however; if that's a requirement please leave
        // a comment but that's not ordinarily how a REST API
        // would work):
        window.open(`${form.action}${form.q.value.trim()}`);
      }
    };
  // here we call the function held within the format Object,
  // after determining the appropriate search-method from the
  // <form> element's custom data-searchmethod attribute and
  // using bracket-notation, in place of dot-notation, to access
  // that function:
  format[form.dataset.searchmethod]();
};

// we iterate over all <form> elements using document.querySelectorAll() to
// retrieve those elements, and then chaining with NodeList.prototype.forEach()
// to handle iteration:
document.querySelectorAll('form').forEach(
  // here we pass the current <form> element into the function,
  // and bind the formHandler() function as the event-handler for
  // the 'submit' event on that <form>:
  (form) => form.addEventListener('submit', formHandler)
);
/* all CSS is irrelevant, it's just to make the demo
   a little prettier */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

form {
  display: flex;
  gap: 0.25em;
  justify-content: start;
  margin-block: 1em;
  margin-inline: auto;
  width: 80vw;
}

button {
  padding-inline: 0.3em;
}
<!-- within the <form> element's opening tag I added a custom data-*
     attribute to provide information about how the search functionality
     is intended to work, in the case of Google we're using, and therefore
     passing, GET parameters: -->
<form action="https://www.google.co.uk/search"
  target="_blank"
  data-searchmethod="getParameters">
  <input type="text" name="q">
  <button>Search Google</button>
</form>

<!-- in the Instagram search, we're using a REST endpoint: -->
<form action="https://www.instagram.com/explore/tags/" target="_blank" data-searchmethod="rest">
  <input type="text" name="q">
  <button>Search instagram</button>
</form>

JS 小提琴演示。

请注意，虽然上面的代码在 JS Fiddle 和 Stack Snippet 之间是相同的，但由于沙箱的安全限制，Snippet 在 Stack Overflow 上无法运行，因此请在链接的JS Fiddle中进行测试。

我觉得值得补充的是，在我的测试过程中，Instagram 的 URL 是根据您的需要创建的，但是 Instagram 网站阻止了该页面的加载。这可能是也可能不是我的结果，但是虽然我可以验证打开页面的 URL 是否与您的请求相匹配，但我无法验证它是否加载了您想要的内容。

参考：

推荐阅读