html после <textarea></textarea> появляется в текстовой области при запуске в браузере. Происходит только на Firefox - PullRequest
Новая
       1

html после <textarea></textarea> появляется в текстовой области при запуске в браузере. Происходит только на Firefox

1 голос
/ 02 мая 2020

Следующая проблема возникает только в Firefox. html после моего текстового поля появляется в текстовом поле, когда страница запускается в браузере. Он отлично работает на Chrome и Safari. Я очистил свой кэш, но он все еще делает это. Я не могу понять, почему какой-либо код появится в поле после закрывающего тега. Снимок экрана ниже, чтобы лучше объяснить проблему. enter image description hereenter image description hereenter image description here

button {
	width: 176px;
	height: 47px;
	background: #6442ff;
	color: #ffffff;
	font-family: "Roboto";
	font-size: 12px;
	line-height: 18px;
	align-items: center;
	border: none;
}


.home-name {
	position: absolute;
	width: 828px;
	height: 38px;
	left: 303px;
	top: 4184px;

	background: #ffffff;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 15px;
	line-height: 25px;

	/* identical to box height, or 167% */
	text-align: left;

	color: #eaeaea;
}

input[type=text] {
	padding-left: 20px;
	padding-top: 2px;
}

.home-email {
	position: absolute;
	width: 406px;
	height: 38px;
	left: 303px;
	top: 4236px;

	background: #ffffff;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
	font-family: Roboto;
	font-style: normal;
	font-size: 15px;
	line-height: 18px;

	/* identical to box height */

	color: #d3d3d3;
}

.home-phone {
	position: absolute;
	width: 406px;
	height: 38px;
	left: 725px;
	top: 4236px;

	background: #ffffff;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
	font-family: Roboto;
	font-style: normal;
	font-size: 15px;
	line-height: 18px;

	/* identical to box height */

	color: #d3d3d3;
}

.home-message {
	position: absolute;
	width: 828px;
	height: 167px;
	left: 303px;
	top: 4288px;

	background: #ffffff;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 15px;
	line-height: 18px;
	;

	/* identical to box height */

	color: #eaeaea;
}

.home-message-contact {
	position: absolute;
	width: 163px;
	height: 47px;
	left: 638px;
	top: 4490px;
}
<html>
<head>
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
<title>Hello</title>
<body>
 <form>
        <div class="name-form">
            <input type="text" placeholder="Name" class="home-name" required>
        </div>
        <div class="phone-form">
            <input type="text" placeholder="Phone" class="home-phone" required>
        </div>
        <div class="email-form">
            <input type="text" placeholder="Email" class="home-email" required>
        </div>
        <div class="message-form">
            <textarea placeholder="Message" class="home-message" required></textarea>
        </div>
        </form>
        <button class="home-message-contact" type="submit">Submit</button>

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Ваш вопрос неясен, однако я нашел одинаковые результаты во всех браузерах. Отсутствует закрытие головы </head> - это ваш html

, просто измените его и измените значение sh на Firefox, нажав Shift + F5.

0 голосов
/ 02 мая 2020

Глядя на свой код, вы забыли закрыть </head>. Хотя это может быть открытая цитата или какой-нибудь сценарий. Ваш код работает нормально. Вы можете прикрепить полный код вашего файла.

ОБНОВЛЕНО

Я воссоздал вашу проблему. Вы забыли закрыть </textarea>

Как это 

<textarea placeholder="Message" class="home-message" required></textarea>

Это то, что происходит, когда я удалил </textarea> enter image description here

ОБНОВЛЕНИЕ 2

Попробуйте поместить <button class="home-message-contact" type="submit">Submit</button> в тег <form>.

Или используйте конструкцию, подобную этой 

<div>
  <form id="my-form">
    <label for="name">Name:</label>
    <input type="text" name="name"></input>
  </form>

  <!-- ... -->

  <button type="submit" form="my-form">Submit</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...