立即在「結果」處顯示輸入字段值div

我希望在每個項目的輸入字段中鍵入任何值後立即顯示在div class="result"上的值。立即在「結果」處顯示輸入字段值div

<form action=""> 
    <input type="text" value="" name="nomin" id="text"> 
<!-- Radio Button --> 
    <label>Radio Button :</label> 
    <input type="radio" name="radio" value="Radio 1">Radio 1 
    <input type="radio" name="radio" value="Radio 2">Radio 2 
    <input type="radio" name="radio" value="Radio 3">Radio 3 
    <input type="radio" name="radio" value="Radio 4">Radio 4 


<!-- Textarea --> 
    <label>Textarea :</label> 
    <textarea id="textarea" ></textarea> 


    <select class="form-control" name="property-type"> 
     <option value="one">1</option> 
     <option value="two">2</option> 
     <option value="three">3</option> 
     <option value="four">4</option> 
    </select> 


    <div class="result">  
     Now Your Typed In :<br> 
     For nome fill : INPUT VALUE FOR TEXT FIELD 
     For Radio Field : VALE SELECTED RADIO FIELD 
     For Textarea Filled : DISPLAYT VALUE TEXTAREA 
    </div>

謝謝！

來源

2017-02-08 Saeed Agha

請嘗試我的代碼在答案中給出。 –

使用keyup/change事件可以在鍵入/更改值時更新該值。

您可以嘗試使用jQuery對其進行編碼。

$(document).ready(function() { 
 
    $(document).on('keyup', '#txt', function() { 
 
    $('#autofill_txt').text($(this).val()); 
 
    }); 
 
    $(document).on('change', 'input[name=radiobtn]', function() { 
 
    $('#autofill_radio').text($(this).val()); 
 
    }); 
 
    $(document).on('keyup', '#txtarea', function() { 
 
    $('#autofill_txtarea').text($(this).val()); 
 
    }); 
 
});

.result { 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <input type="text" value="" name="nomin" id="txt"> 
 
    <!-- Radio Button --> 
 
    <br> 
 
    <label>Radio Button :</label> 
 
    <input type="radio" name="radiobtn" value="Radio 1">Radio 1 
 
    <input type="radio" name="radiobtn" value="Radio 2">Radio 2 
 
    <input type="radio" name="radiobtn" value="Radio 3">Radio 3 
 
    <input type="radio" name="radiobtn" value="Radio 4">Radio 4 
 

 
    <br> 
 
    <!-- Textarea --> 
 
    <label>Textarea :</label> 
 
    <textarea id="txtarea"></textarea> 
 
    <br> 
 
    <select class="form-control" name="property-type"> 
 
    <option value="one">1</option> 
 
    <option value="two">2</option> 
 
    <option value="three">3</option> 
 
    <option value="four">4</option> 
 
    </select> 
 
</form> 
 

 
<div class="result"> 
 
    Now Your Typed In : 
 
    <br>For nome fill : 
 
    <span id="autofill_txt">INPUT VALUE FOR TEXT FIELD</span> 
 
    <br>For Radio Field : 
 
    <span id="autofill_radio">VALE SELECTED RADIO FIELD</span> 
 
    <br>For Textarea Filled : 
 
    <span id="autofill_txtarea">DISPLAY VALUE TEXTAREA</span> 
 
</div>

來源

2017-02-08 09:58:50

我有兩個問題 1當我刷新輸入值保持在外地，但在結果區未顯示的頁面

2 - 如何顯示下拉字段值謝謝

來源

2017-02-11 14:12:45

立即在「結果」處顯示輸入字段值div

回答

相關問題