javascript - JavaScript 编码字段而不破坏显示

Question

我想在提交为 $_GET 请求之前对特定的搜索字段进行编码。我正在做的是在提交表单之前在该字段上应用 encodeURIComponent() 函数

$('#frmMainSearch').submit(function() {
    var field = $(this).find('#searchinput');
    field.val(encodeURIComponent(field.val()));
});

问题是，一旦文本被编码，该字段就会显示看起来有点奇怪的编码文本。我能做些什么来避免它吗？

示例：我输入Hello & Hello。当我单击提交按钮时，它会在页面刷新之前变成类似于Hello %26 Hello的内容。我想避免这种情况。

有什么解决办法吗？

谢谢

score 2 · Accepted Answer

我最近不得不解决同样的问题。我是这样做的：

创建您希望面向用户的输入字段，例如：

<input class="really-nice-looking-field" 
       id="search-text-display" 
       placeholder="Search for stuff..." 
       type="text">

请注意，对于显示的字段，该name属性被明确省略。这将使该search-text-display字段远离提交的表单，因此您不会有未使用的参数通过。
创建一个隐藏字段，这是实际用于提交的字段，如下所示：
```
<input id="search-text" name="search_text" type="hidden">
```

在提交表单之前从表单中捕获提交事件以填充隐藏字段，如下所示：

$('#site-search').submit(function() {
    $('#search-text').val(
        encodeURIComponent($('#search-text-display').val())
    );
});

这将在您的参数通过转义时根据需要保持向用户显示的输入字段不变：

    Parameters: {"utf8"=>"✓", "search_text"=>"hello%20%26%20hello"}

1 回答 1