如何使輸入文本顯示在文本欄位中？

我希望這個輸入專案名稱和地址顯示在文本區域中。

目前，可以在文本框中顯示輸入的專案名稱和復選框文本。

ps：我忘記在上一個問題中添加復選框HTML代碼。

我會很感激你的幫助。

這是我的代碼：

    let existValue = "";
    $('input:checkbox').click(function(){
        var tb = "#" $(this).attr('rel');
        let text_to_add = this.name   "\n";
    
        let inputVal = $('#pname').val()
        //when click a checkbox and show checked items in the text area
        if($(this).is(":checked")){
            $(tb).val($(tb).val()   text_to_add);
        }else{
            let remove = this.name  "\n";
            //when a box is unchecked it clears the previously populated text from checkbox
            $(tb).val($(tb).val().replace(remove,""));
        }
    
        //storing the value to existValue
    
        existValue = $(tb).val().replace(`${inputVal}\n`, "");
            
    });
    
    $('#pname').on('input',(e)=>{
        //here to adding the input value to the existValue
        $('#textbox1').val(`${e.target.value}\n${existValue}`)
    });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="name">
                <form>
                    <label for="projectname">Project name:</label>
                    <input type="text" id="pname" name="pname">
                    <br>
                    <div class="form-group">
                        <label>Project Address:</label>
                        <input type="text" class="form-control" id="search_input" placeholder="Type address..." />
                        <input type="hidden" id="loc_lat" />
                        <input type="hidden" id="loc_long" />
                    </div>
                    <div class="latlong-view">
                        <p><b>Latitude:</b> <span id="latitude_view"></span></p>
                        <p><b>Longitude:</b> <span id="longitude_view"></span></p>
                    </div>
                </div>
<div class="series1">
                <tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/>
                    Cabinets
                </tr>
                <input type="checkbox" rel="textbox1" name="Doors"/>
                Doors
                <input type="checkbox" rel="textbox1" name="Drawers">
                Drawers
                <input type="checkbox" rel="textbox1" name="Drawer Fronts">
                Drawer Fronts
                <input type="checkbox" rel="textbox1" name="Handles">
                Handles
</div>
                <br>
                <textarea id="textbox1" ></textarea>

uj5u.com熱心網友回復：

這應該這樣做：

const inps=$('input[type=text]').on('input',()=>
  $('#textbox1').val(inps.get().map(i=>i.value).join("\n"))
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
  <form>
    <label for="projectname">Project name:</label>
    <input type="text" id="pname" name="pname">
    <br>
    <div class="form-group">
      <label>Project Address:</label>
      <input type="text" class="form-control" id="search_input" placeholder="Type address..." />
      <input type="hidden" id="loc_lat" />
      <input type="hidden" id="loc_long" />
    </div>
    <div class="latlong-view">
      <p><b>Latitude:</b> <span id="latitude_view"></span></p>
      <p><b>Longitude:</b> <span id="longitude_view"></span></p>
    </div>
</div>
<textarea id="textbox1"></textarea>

由于您當前的 HTML 中沒有復選框，因此我洗掉了這些元素的事件處理并集中在文本輸入上。在我的代碼片段中，我按型別（=text）選擇了輸入欄位。在一個真實的例子中，您應該對它們應用一個通用類并通過它來選擇它們。

標籤：javascript jQuery

上一篇：匹配克隆的依賴下拉串列中的兩個ID屬性

下一篇：如何在jQuery中添加媒體查詢