HTML：<input />似乎无法同时使用“ pattern =“和“ list =” ？？

Question

我正在为用户提供输入字段。 URL就是其中之一。我想限制允许的网址，如下所示：

        <input name="source" type="url" pattern="https://www.youtube.com/(.+)|https://www.vimeo.com/(.+)|https://open.spotify.com/(.+)|https://www.soundcloud.com/(.+)|https://www.deezer.com/(.+)" placeholder="{$lng->source_place}" value="{$source}">

这很好。我还有另一种方法，其中该字段提供一个下拉菜单，而不是显示建议提交的URL：

        <input name="source" type="url" list="defaultURLs">
                        <datalist id="defaultURLs">
                          <option value="https://www.youtube.com/">
                          <option value="https://www.vimeo.com/">
                          <option value="https://open.spotify.com/">
                          <option value="https://www.soundcloud.com/">
                          <option value="https://www.deezer.com/">
                        </datalist>

这本身也可以正常工作，但是不会阻止用户提交其他URL。

我尝试将两者结合起来，以便在下拉菜单中提供推荐的站点，并强制执行这些选择。因此，理论上是这样的：

<input name="source" type="url" list="defaultURLs" pattern="https://www.youtube.com/(.+)|https://www.vimeo.com/(.+)|https://open.spotify.com/(.+)|https://www.soundcloud.com/(.+)|https://www.deezer.com/(.+)|http://bbcsfx.acropolis.org.uk/(.+)|https://soundbible.com/(.+)" placeholder="URLs" value="{$source}">
                        <datalist id="defaultURLs">
                          <option value="https://www.youtube.com/">
                          <option value="https://www.vimeo.com/">
                          <option value="https://open.spotify.com/">
                          <option value="https://www.soundcloud.com/">
                          <option value="https://www.deezer.com/">
                        </datalist>

但是，只有“ pattern =”被强制执行，没有下拉菜单可见。

我以为我在某个地方读到了（愚蠢的找不到链接）这是不可能的，但是在同一线程中，有人找到了解决方法。

感谢任何想法/投入