Блог

Главная - Вопросы по программированию - Как сохранить текст из текстового поля в добавленном поле?

Как сохранить текст из текстового поля в добавленном поле?

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Чего я хотел добиться, так это, по сути, добавления текста из ввода во что-то, что было добавлено совсем недавно. Возможно ли это? По сути, это похоже на веб-сайт для общения в чате. Текст, написанный пользователем, должен храниться в добавленном объекте, но я не могу этого добиться.

Подробности: — Ввод, в котором пользователь вводит сообщение. Кнопка, которая добавляет ввод, доступный только для чтения. Ввод, доступный только для чтения, должен содержать сообщение, введенное пользователем в исходном вводе.

Вот мой скрипт!

 <html>

<head>
    <title>Friend's Circle</title>
    <style>
        .Hammer-Div {
            background-color: #3a3939;
            color: white;
            height: 100%;
            width: 80px;
            border-radius: 10px 10px 10px 10px;
            transition: 0.4s;
            position: fixed;
        }

        .container {
            display: inline-block;
            cursor: pointer;
        }

        .bar1,
        .bar2,
        .bar3 {
            width: 35px;
            height: 5px;
            background-color: rgb(105, 105, 105);
            margin: 6px 0;
            transition: 0.4s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }

        .Items {
            cursor: pointer;
        }

        p {
            font-size: 30px;
            display: none;
        }

        .Results {
            height: 100%;
            width: 92.5%;
            background-color: #585858;
            border-radius: 10px 10px 10px 10px;
            float: right;
        }

        .MessageBox {
            width: 90%;
            height: 80%;
            border-radius: 10px 10px 10px 10px;
            background-color: hsl(0, 1%, 27%);
            border: none;
            float: left;
            margin-left: 1%;
            margin-top: 0.5%;
            color: white;
            font-size: 30px;
            padding-left: 20px;
        }

        .MessageUnit {
            height: 10%;
            width: 100%;
            background-color: #383838;
            border-radius: 10px 10px 10px 10px;
        }
        .Message{
            height: 65px;
            width: 40%;
            background-color: #383838;
            border-radius: 10px 10px 10px 10px;
            border: none;
            margin-left: 1%;
            color: white;
            font-size: 30px;
            padding-left: 20px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#Menu").click(function () {
                var a = $("#HammerDiv");
                a.css('width', '200px');
                $("p").toggle();
                setTimeout(function () { a.css('width', '80px'); }, 2500);
                setTimeout(function () { $("p").toggle(); }, 2500);
            });
        });
        $(document).ready(function () {
            $("#SendMessage").click(function () {
                $("#Results").append("<br><input readonly class='Message'><br>");
            });
        });
    </script> </head>

<body bgcolor="#1a1a1a">
    <div class="Hammer-Div" id="HammerDiv">
        <center>
            <div class="container" id="Menu"><br>
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div><br><br>
            <img src="https://th.bing.com/th/id/OIP.PTArRyNau0VomdH647ex3gHaHa?w=183amp;h=183amp;c=7amp;o=5amp;pid=1.7"
                style="opacity: 0.5; border-radius: 50%; height: 70px; width: 70px;">
            <p>Chat</p>
        </center>
    </div>
    <div class="Results" id="Results">
        <center>
            <div class="MessageUnit">
                <input class="MessageBox" placeholder="Type Your Message Here!" id="MessageBox">
                <img src="https://th.bing.com/th?q=Send Arrow Iconamp;w=120amp;h=120amp;c=1amp;rs=1amp;qlt=90amp;cb=1amp;pid=InlineBlockamp;mkt=en-WWamp;adlt=moderateamp;t=1amp;mw=247"
                    style="border-radius: 50%; width: 60px; height: 60px; border-color:#ffffff; margin-top: 0.5%; cursor: pointer;"
                    border="4px" id="SendMessage">
            </div>
        </center>
    </div> </body>

</html>

Ответ №1:

Вот подход, который вам следует рассмотреть:

  1. Получить значение текста, введенного пользователем из MessageBox input .
  2. Создайте новый input тег, создайте его readonly и присвоите value новому вводу значение из MessageBox ввода
  3. Добавьте входные данные в Results 
 $("#SendMessage").click(function () {
   // 1
   const msgBoxIn = document.getElementById('MessageBox');

   // 2
   const text = msgBoxIn.value;
   const newMsgIn = document.createElement('input');
   newMsgIn.setAttribute('readonly', true);

   // 3
   newMsgIn.value = text;
   const resultsDiv = documet.getElementById('Results');
   const br = document.createElement('br');
   resultsDiv.appendChild(br);
   resultsDiv.appendChild(newMsgIn);
});

Результирующий HTML-код будет выглядеть следующим образом:

 <div class="Results" id="Results">
        <center>
            <div class="MessageUnit">
                <input class="MessageBox" placeholder="Type Your Message Here!" id="MessageBox">
                <img src="https://th.bing.com/th?q=Send Arrow Iconamp;w=120amp;h=120amp;c=1amp;rs=1amp;qlt=90amp;cb=1amp;pid=InlineBlockamp;mkt=en-WWamp;adlt=moderateamp;t=1amp;mw=247"
                    style="border-radius: 50%; width: 60px; height: 60px; border-color:#ffffff; margin-top: 0.5%; cursor: pointer;"
                    border="4px" id="SendMessage">
            </div>
        </center>
        <br>
        <input readonly value='Value you added'>
</div>

Также обратите внимание, что вы использовали одно и то же имя для обоих id и class здесь : <div class="Results" id="Results"> . Только CSS, объявленный с помощью id , будет применяться на основе правил специфичности CSS-селектора. Рассмотрим разные имена.

Примечание: фрагмент текста написан на простом JS. Подумайте, как вы можете использовать jquery для этого.

Комментарии:

1. Спасибо за ваш ответ. Я пытался использовать его, и это не сработало, но, по крайней мере, я получил ссылку. Еще раз спасибо!

2. Какие ошибки вы получили? Что именно не сработало?

3. Не совсем ошибка, просто значение не отображалось. Но мне удалось использовать для этого jquery. В любом случае спасибо вам за ваши усилия.