使用 javascript 获取 type="color" 输入值时的错误

Posted 2023-05-09

【中文标题】使用 javascript 获取 type="color" 输入值时的错误

【英文标题】：bug when getting value of type=“color” input using javascript

【发布时间】：2021-03-02 06:47:12

【问题描述】：

我正在努力解决一个问题，但无法找到解决方案。 我有一个在我发布消息时会重新加载的表单。

消息通过，一切正常。 我在表单中添加了一个颜色选择器并尝试获取它的值...... 它不工作。

我一开始以为是我的“帖子”继承了那个错误...但是用警报显示它，这似乎是正确的。

所以，在你们生气之前，我确实阅读了论坛中的其他帖子，例如 article。 但我有一个错误。

这是我的html：

<form method="pos" class="d-flex" id="chatform">
    <div class=" mr-2" data-toggle="buttons" >
        <label class="btn button rounded-100 active">
            <input type="checkbox" unchecked autocomplete="off" id="bold"> B
        </label>
    </div>
    <div class=" mr-2" data-toggle="buttons">
        <label class="btn button rounded-100 active">
            <input type="checkbox" unchecked autocomplete="off" id="italic"><EM>It</EM>
        </label>
    </div>
    <div class="mr-2">
        <input type="color" class="color_btn mb-1" id="favcolor" value="#ffffff">
    </div>
    <div class="d-flex justify-content-between align-items-center mb-1">
        <div class="flex-grow-1">
            <textarea autofocus id="message" class="message_input" ></textarea>
        </div>
   </div>
</form>

所以，现在我使用以下 ajax 来传递信息：

$('.message_input').keyup(function(e)if( e.which ==13)$('form').submit(););
$('form').submit(function()
            
                var message =   document.getElementById("message").value;
                var italic  =   document.getElementById("italic").value;
                var bold    =   document.getElementById("bold").value;
                var favcolor   =   document.getElementById("favcolor").value;
            
            $.post('core/chat_logic.php?action=send&message='+message+'&italic='+italic+'&bold='+bold+'&color='+favcolor, function(response)alert(response); ););

在另一端使用 php 将我的回复中的帖子 URL 发回给我：

"localhost/chat/v2/core/chat_logic.php?action=send&message=fgdfg&italic=on&bold=on&color="

如您所见，颜色值始终为空。

我尝试了什么：

我尝试为颜色选择器设置一个硬值 =“#ffffff”，但错误仍然存​​在。

我在我的自定义 URL 中更改了参数的顺序。它总是在颜色之后停止（例如：当我将参数放在颜色之后，下面是我得到的内容。不是斜体和粗体还在。

"localhost/chat/v2/core/chat_logic.php?action=send&message=testmessage&&color="

我还尝试了一些可以帮助我的方法：我从 html 表单标签中删除了 methode="post"... 这会在我的 url 中显示我的参数。这是它唯一一次显示我的颜色值：

"&message=testmessage&&color=%23ffffff&&italic=on&bold=on

所以我在想也许是 %23 破坏了代码......但是后来......我不知道为什么。 提前感谢您的帮助

更新

我添加了“alert(favcolor);”在我的提交函数中，它显示正确的颜色代码，所以我的问题是将参数传递给 php？

“%23ffffff”

【参考方案1】：

我不会通过查询字符串传递值，而是使用 Post 的数据参数：

data = 
"action" : "send",
"message" : message,
"italic" : italic,
"bold" : bold,
"color" : favcolor
;

$.post('core/chat_logic.php',data, function(response) 
  alert(response);
);

【讨论】：

运行流畅！非常感谢您。当我在做的时候，我可以碰碰运气，问你是否知道为什么复选框的值总是“打开”？即使未选中？ （而且我确实实现了一个脚本，允许我在两次引用之间记录它们的状态）

【参考方案2】：

我同意 imvain2 的回答。但是如果你想把它保存在查询字符串中，你可以像这样对你的 favcolor 值进行编码：

var favcolor   =  encodeURIComponent( document.getElementById("favcolor").value );

【参考方案3】：

在将颜色代码发送到请求标头或正文之前，您需要对其进行编码。您可以使用 encodeURIComponent 对其进行编码