Question

我需要帮助以获得新的表单功能。在表单字段中，当单击它时，在预览按钮上给出的URL将在带有该URL的新选项卡中打开。我不明白怎么做。请点击图片网址以便更好地理解。 http://i.imgur.com/WhqrDFA.jpg

提前致谢。

Answer 1

你的HTML看起来像这样：

<input id="myurl" value="" onchange="updatePreview();" />
<a href="#" id="mybutton" target="_blank">Preview</a>

然后你就可以简单地创建一个可以改变标签目的地的js函数：

function updatePreview() {
  document.getElementById('mybutton').href = document.getElementById('myurl').value ;
}

注意：你的元素的id可以是你想要的任何东西，你只需要在脚本中更新它们。

如果你正在使用Bootstrap样式，那么看起来像一个按钮的链接就可以通过将类设置为btn来实现，但是如果你不是这样的话那么就会让它看起来像一个按钮：

.button {
  display: block;
  width: 75px;
  height: 15px;
  background: #000;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-decoration:none;
}

显然，你会调整风格以适合你的网站，但这应该指向正确的方向。

表单字段功能 - “预览”按钮将在新选项卡中打开给定的URL

1 个答案: