HTML表单value值含双引号时如何完整传递参数到文本框

问题根因 #

你遇到的截断问题是HTML属性的语法规则导致的：你用双引号包裹value属性值，属性值内部的双引号会被浏览器识别为value属性的结束标记，所以读取到JSON第一个内部双引号时就自动截断了，最终只显示{。

解决方法 #

方法1：正确转义内部双引号 #

将value内部所有双引号替换为HTML实体"即可，注意不要多转义&符号（你之前写的&quot是错误的，相当于把&也转义了，无法生效）。
修改后的完整表单代码如下：

<form method="POST" action="https://localhost/graphql/authenticate">
    <input type="text" name="auth" value="{&quot;Query&quot;:&quot;query getToken($clientToken: String!, $password: String!)&quot;,&quot;OperationName&quot;:&quot;getToken&quot;,&quot;Variables&quot;:{&quot;clientToken&quot;:&quot;appToken&quot;,&quot;password&quot;:&quot;myPassword&quot;}}" />
    <input type="submit" value="Go" />
</form>

方法2：改用单引号包裹value属性 #

直接把value属性的包裹符号换成单引号，内部的双引号不需要额外转义，只要确保你的目标字符串里没有未转义的单引号即可，写法更简洁：

<form method="POST" action="https://localhost/graphql/authenticate">
    <input type="text" name="auth" value='{"Query":"query getToken($clientToken: String!, $password: String!)","OperationName":"getToken","Variables":{"clientToken":"appToken","password":"myPassword"}}' />
    <input type="submit" value="Go" />
</form>

方法3：JS动态赋值（零转义成本） #

如果担心手动转义出错，直接用JS给input赋值，完全不需要处理HTML转义规则：

<form method="POST" action="https://localhost/graphql/authenticate">
    <input type="text" name="auth" id="authInput" />
    <input type="submit" value="Go" />
</form>
<script>
const targetValue = `{"Query":"query getToken($clientToken: String!, $password: String!)","OperationName":"getToken","Variables":{"clientToken":"appToken","password":"myPassword"}}`
document.getElementById('authInput').value = targetValue
</script>

以上三种方法都可以让文本框完整展示目标字符串，提交表单时服务端也能拿到完整的参数内容。

内容的提问来源于stack exchange，提问作者Markus