Bootstrap（输入文本到模式）

Question

我有这个代码，我需要添加介绍模式（输入文本进行验证）：

        echo'
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">KÓD</span>
          </div>
          <input type="text" class="form-control" placeholder="Vlož zde zvací kód hráče, který tě pozval" aria-label="Vlož zde zvací kód hráče, který tě pozval" aria-describedby="basic-addon1">
        </div>
        
        <center><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#overeni-kodu">
          Uložit
        </button></center>

        <div class="modal fade" id="overeni-kodu" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="overeni-kodu">Kontrola zadání</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                Pozval Tě hráč se zvacím kódem: <span class="badge badge-info">XXXXXX</span>
                <br><br>
                Je to správně?
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Opravit</button>
                <button type="button" class="btn btn-success">Opravdu uložit</button>
              </div>
            </div>
          </div>
        </div>
        ';

我需要从输入组 mb-3（文本）位置到模态（代码 XXXXXX 中的位置）

如何添加？有可能吗？

Answer 1

我的理解是您想用给定的代码替换 XXXXXX。如果是这样，您需要添加 3 件事。

分别为输入和跨度添加 id="code" 和 id="codeResult" 属性。
在按钮中添加onclick="CodeDisplay()"。
在 HTML 代码末尾添加以下 JavaScript 函数。

    <script>
            function CodeDisplay(){
                var code = document.getElementById('code').value;
                document.getElementById('codeResult').innerHTML = code;
            }
    </script>

片段

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="input-group mb-3">
       <div class="input-group-prepend">
         <span class="input-group-text" id="basic-addon1">KÓD</span>
       </div>
       <input id="code" type="text" class="form-control" placeholder="Vlož zde zvací kód hráče, který tě pozval" aria-label="Vlož zde zvací kód hráče, který tě pozval" aria-describedby="basic-addon1">
     </div>

     <center><button onclick="CodeDisplay()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#overeni-kodu">
       Uložit
     </button></center>

     <div class="modal fade" id="overeni-kodu" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="overeni-kodu">Kontrola zadání</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body">
             Pozval Tě hráč se zvacím kódem: <span id="codeResult" class="badge badge-info">XXXXXX</span>
             <br><br>
             Je to správně?
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Opravit</button>
             <button type="button" class="btn btn-success">Opravdu uložit</button>
           </div>
         </div>
       </div>
     </div>

<script>
        function CodeDisplay(){
            var code = document.getElementById('code').value;
            document.getElementById('codeResult').innerHTML = code;
        }
</script>


<!-- Bootstrap dependency (Jquery & JS) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Bootstrap（输入文本到模式）

Bootstrap (input text to modal)

html

php

echo

twitter-bootstrap

片段