Question

我已使用此代码显示Google网络搜索框

<form method="get" action="https://google.com/search">
    <input type="text" name="q"  size="31" value=" ">
</form>

我想要预先填写文本框 “做什么”并让用户输入位置（示例类型仅限悉尼）所以查询将是：在悉尼可以做些什么“ 可能吗？我只是一个初学者，对HTML不太了解。非常感谢您的帮助。谢谢费尔南多

Answer 1

使用value = "What to do in"，这将有效。

Answer 2

如果您只使用HTML，请执行以下操作：

<input type="text" name="q"  size="31" value="What to do in ">

Answer 3

你应该以一种用户清楚的方式构建它，他的搜索将被添加到这一行：怎么做：

之类的东西

<span>What to do in</span><input type="text" id="search" name="q"  size="31" value=" ">

和js或其他任何东西：

$.get('https://www.google.co.il/search?q=what to do in ' + $('#search').val(),function(data){
    //Do stuff with seach results 
})

然后，您可以将该单词附加到查询

Answer 4

上述答案的问题是用户可以删除整个文本并重新开始..

所以如果你真的想把它限制为“在...中做什么”，那么你应该只提供该位置的文本输入..类似于raam86的答案。

<form method="get" action="https://google.com/search">
    <label for="whattodo">What to do in</label>
    <input type="hidden" name="q" id="real_input" value="what to do in" />
    <input type="text" id="whattodo" onkeyup="fillForm(this.value);" />
</form>

<script>
function fillForm( _val )
{
    document.getElementById('real_input').value = 'what to do in ' + _val;
}
</script>

尽可能使用label - 这会将文字与input区域相关联 - 这意味着，如果用户点击label，他们会将焦点集中到输入框中，准备好键入..

你会注意到有一个隐藏的输入和一个文本输入

隐藏的输入充满了“该做什么”以及文本字段中的文本（当用户输入时，会触发一些名为fillForm()的javascript附加隐藏字段（查询）字段）用户输入的文本..这可以确保它始终在查询前面有“做什么”。

你应该放置

function fillForm( _val )
{
    document.getElementById('real_input').value = 'what to do in ' + _val;
}

在HTML文档的<head>和</head>之间。

如何部分预填充查询框？

4 个答案: