javascript 设置的输入值在 PHP 的控制器中返回空值

Question

朋友们早上好，

我正在局域网中创建一个小聊天，我决定放一些表情符号。但是，当我从输入中检索值并将所选表情符号添加到其中时，如果我不对输入字符串进行更多手动添加，PHP 会收到空表情符号。

chat-room.blade.php - 在这里，我创建了一个带有表情符号的气球 unicode 范围

<div class="container-fluid" id="emoji-list" style="display: none; height: 0; width: 0;">
   <div id="emoji-scroll">
   @php
      $emojiUnicodeRange = [[0x1f600, 0x1f64e], [0x1f910, 0x1f91e], [0x1f920, 0x1f927], [0x1f300, 0x1f5ff], [0x1f680, 0x1f6c1], [0x1f950, 0x1f95e], [0x1f980, 0x1f991]];
   @endphp
   @foreach ($emojiUnicodeRange as $range)
      @for ($emojiUnicode = $range[0]; $emojiUnicode <= $range[1]; $emojiUnicode++)
         <span id="{{ html_entity_decode('&#' . $emojiUnicode . ';', 0, 'UTF-8') }}" class="emoji-item" onClick="inserirEmoji(this.id)">{{ html_entity_decode('&#' . $emojiUnicode . ';', 0, 'UTF-8') }}
         </span>
      @endfor
   @endforeach
   </div>
</div>

chat-room.blade.php - 这是打开表情符号气球的按钮和输入文本

<span id="show-emoji-list" onclick="showEmojiList()">
       <i class="far fa-grin" aria-hidden="true"></i>
</span>
    <input wire:model="body" type="text" class="form-control input-sm rounded" id="msg-input" placeholder="Escreva sua mensagem...">

chat-room.blade.php - 这是我用来打开和打开的js函数关闭表情符号气球，并将点击的表情符号插入输入

var emoji_list = document.getElementById('emoji-list');

function showEmojiList() {
   if (this.emoji_list.style.display == 'none') {
      this.emoji_list.style.display = 'block';
      this.emoji_list.style.height = '200px';
      this.emoji_list.style.width = '90%';
   } else {
      this.emoji_list.style.display = 'none';
      this.emoji_list.style.height = '0';
      this.emoji_list.style.width = '0';
   }
}

function inserirEmoji($id) {
   var input = document.getElementById('msg-input');
   var emoji = document.getElementById($id);
   input.value = input.value + emoji.id;
   this.emoji_list.style.display = 'none';
   this.emoji_list.style.height = '0';
   this.emoji_list.style.width = '0';
   input.focus();
}

ChatRoom.php - 这是聊天控制器

public function sendMessage(Request $request)
{
   $user = $request->user();
   $room = $this->room;
   $body = $this->body;
   dd(html_entity_decode($body));
   if (!$body) {
      $this->addError('body', 'Digite uma mensagem.');
      return;
   }
   $message = Message::create([
       'body' => $body,
       'user_id' => $user->id,
       'room_id' => $this->room->id
   ]);
        
   event(new MessageCreated($user, $room, $message));
   return view('livewire.chat-room')->with(compact('room'));
}

dd(); 在第 6 行调用 returns 一个空字符串，除非我在插入表情符号的同时输入一些东西，如果我输入一些东西然后插入表情符号，表情符号就会空字符串...

PS: chat-room.blade.php - 这是一个 Laravel/Livewire 组件 blade

Answer 1

The secret is here: Inside the javascript inline function that populates the input with the chosen Emoji, as soon as it populates the input, it should update the value of the Livewire wire:model calling:

@this.set('body', input.value);

function inserirEmoji($id) {
   var input = document.getElementById('msg-input');
   var emoji = document.getElementById($id);
   input.value = input.value + emoji.id;
   @this.set('body', input.value);
   this.emoji_list.style.display = 'none';
   this.emoji_list.style.height = '0';
   this.emoji_list.style.width = '0';
   input.focus();
}

javascript 设置的输入值在 PHP 的控制器中返回空值

Input Value set by javascript returning empty in controller in PHP

javascript

php

unicode-string

laravel

laravel-livewire