Dream's questions

请告诉我如何制作一个左上角带有箭头的矩形？我尝试::before用半圆形，但无法实现这种形状。

.BigField {
  position: relative;
  left: 0;
  top: 74px;
  height: 50px;
  width: 624px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.SmallField {
  position: relative;
}

.SmallField form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.textarea-wrapper {
  position: relative;
}


.textarea-wrapper::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 10px solid transparent;
  border-right-color: rgb(255, 0, 0);
  border-radius: 50%;
  left: 20px;
  top: 3px;
}


.SmallField textarea {
  position: absolute;
  height: 28px;
  width: 572px;
  top: 8px;
  right: 8px;
  resize: none;
  border-radius: 14px;
  outline: none;
  border: none;
  color: white;
  background-color: rgba(0, 0, 0);
  padding: 0 11px;
  line-height: 28px;
  cursor: text;
  caret-color: white;
  box-sizing: border-box;
}

.SmallField textarea::placeholder {
  color: white;
}

<div class="BigField">
  <div class="SmallField">
    <form>
      <div class="textarea-wrapper">
        <textarea placeholder="Текст"></textarea>
      </div>
    </form>
  </div>
</div>

大家好，X.com从电脑上加载图像后，我注意到有一个蓝框，这是显示头像的区域，外面有一个变暗的区域，我想知道如何使用css来实现这样的变暗？

大家好，我正在学习 React 和 JSX，试图验证注册表单的名字和姓氏。如果输入字段仅包含空格或不可见符号（ㅤ），那么当您单击“下一步”按钮时，它们会以红色突出显示。next好吧，相应地，在字段通过验证之前，该按钮不会执行任何操作。

我尝试自己执行此操作，只是为了检查是否有空输入，但它的工作方式尽可能不正确：两个字段为空，仅突出显示姓氏，如果您输入 1 个字符，则突出显示名称。一般来说，保存。先感谢您。

JSX：

  const [name, setName] = useState('');
  const [nameInvalid, setNameInvalid] = useState(false);
  const [surname, setSurname] = useState('');
  const [surnameInvalid, setSurnameInvalid] = useState(false);
  
  function handleSubmit(e) {
    e.preventDefault();
  
    if (!name) {
      setNameInvalid(true);
      return;
    }
  
    if (!surname) {
      setSurnameInvalid(true);
      return;
    }

  }


          <form on onSubmit={handleSubmit}>

            <label htmlFor="username"></label>
              <input
                type="text"
                id="username"
                className={`InputForm ${nameInvalid ? 'invalid' : ''}`}
                placeholder="Name"
                value={name}
                onChange={(e) => {
                  setName(e.target.value);
                  setNameInvalid(name.trim() === '');
                }}
                required
                onInvalid={(e) => {
                  e.preventDefault();
                  setNameInvalid(true);
                }}
              />

              <label htmlFor="usersurname"></label>
              <input
                type="text"
                id="usersurname"
                className={`InputForm ${surnameInvalid ? 'invalid' : ''}`}
                placeholder="Surname"
                value={surname}
                onChange={(e) => {
                  setSurname(e.target.value);

                  setNameInvalid(surname.trim() === '');
                }}
                required
                onInvalid={(e) => {
                  e.preventDefault();
                  setNameInvalid(true);
                }}
              />

            <button
              className='RegisterButton'
              type="button"
              onClick={(e) => {
                if (!surname) {
                  e.preventDefault();
                  setSurnameInvalid(true);
                  return;
                }
                handleStepChange("next");
              }}
            >Далее</button>

          </form>

CSS：

.InputForm.invalid {
  outline: 2px solid #fa05a0;
}

对于媒体适配，您需要指定宽度和高度：

@media (orientation: portrait) and (max-width: 360px) and (max-height: 640px) {}  

还是分开？简单来说，如果一次性指定所有内容，就会出现盲点。您能否写出媒体适应的主要尺寸（从最小的智能手机显示屏（0-360）到超宽显示屏）？

大家好，我正在学习针对不同对角线和屏幕分辨率的 CSS 媒体适配。媒体适配有标准尺寸吗？很明显，有很多设备等等，但我需要一个基本尺寸（最小宽度、最大宽度、最小高度、最大高度）列表来进行初始使用，这将捕获主屏幕尺寸智能手机、平板电脑等。它们之间没有“灰色地带”。

大家好，为了让网站在css中不同对角线和分辨率下看起来都一样，是用%设置大小好还是使用media好？我知道它们可能会合并，但在这种情况下我不清楚如何合并。例如：有一个按钮，如果我使用media，那么设置它的尺寸是px还是%？我还想了解字体：它也是以 px 或 % 为单位吗？

我想在按 Enter 时发送消息。

document.addEventListener('DOMContentLoaded', function() {
  const messagesContainer = document.querySelector("#messages_container");
  const messageInput = document.querySelector('[name=message_input]');
  const sendMessageButton = document.querySelector('[name=send_message_button]');
  let websocketClient = new WebSocket("ws://localhost:12345");
  websocketClient.onopen = () => {
    console.log("Client conntected!");
    websocketClient.send("Hello!");
    sendMessageButton.onclick = () => {
      websocketClient.send(messageInput.value);
      messageInput.value = "";
    };
  };
  websocketClient.onmessage = (message) => {
    const newMessage = document.createElement('div');
    newMessage.innerHTML = message.data;
    messagesContainer.appendChild(newMessage);
    console.log(message.data);
  }
  document.onkeydown = () => {
    if (e.keyCode === 13) {
      messagesContainer.submit();
    }
  }
}, false);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Version1</title>
</head>

<body>
  <div id="messages_container" style="border: 2px solid"></div>
  <div>
    <input type="text" name="message_input">
    <input type="button" name="send_message_button" value="Send message">
  </div>
  <div></div>
</body>

</html>

我写了发送到“Enter”的代码，但没有任何反应，请帮忙