如何顯示文本框的默認值，然後點擊按鈕後追加輸入

Question

美好的一天！再次爲我的html項目尋求幫助，下面是我使用的腳本和按鈕命令。當按鈕點擊時沒有檢測到任何輸入時，我希望默認輸入框具有默認值Model，IMEI和Serial默認值。現在，當我向框中輸入值時，我希望輸入出現在冒號後的默認值後面（例如Model：SM-G900I）是否可行？再次感謝您的幫助:)這裏是一個鏈接輸出，我想順便說http://picpaste.com/test_fields-DicIgF8B.JPG

<script> 
function showInput2(){ 
var ui1 = document.getElementById('model').value; 
var ui2 = document.getElementById('imei').value; 
var ui3 = document.getElementById('serial').value; 
document.getElementById('display2').innerHTML = ui1 + '\n' + ui2 + '\n' + 
i3; 
} 
</script> 

<p><label>Model</label> 
<input type = "text" id = "model" /></p> 

<p><label>IMEI</label> 
<input type = "text" id = "imei" /></p> 

<p><label>S/N</label> 
<input type = "text" id = "serial" /></p> 

<button type="submit" onclick="showInput2();">Submit</button><br/> 
<p><textarea name="device details" cols="33" rows="5" id='display2'> 
</textarea></p> 

Answer 1

之前提交表單比較用戶是否進入除默認值以外的其他東西。

function showInput2(){ 
 
var ui1 = document.getElementById('model').value; 
 
var ui2 = document.getElementById('imei').value; 
 
var ui3 = document.getElementById('serial').value; 
 
//checking of empty string for model 
 
if(ui1.trim() != '') 
 
    ui1 = 'Model: ' + ui1; 
 
//Checking for empty string for IMEI 
 
if(ui2.trim() != '') 
 
    ui2 = 'IMEI: ' + ui2; 
 
//Checking for empty string for Serial 
 
if(ui3.trim() != '') 
 
    ui3 = 'Serial: ' + ui3; 
 
document.getElementById('display2').innerHTML = ui1 + '\n' + ui2 + '\n' + ui3; 
 
}

<p><label>Model</label> 
 
<input type = "text" id = "model" /></p> 
 

 
<p><label>IMEI</label> 
 
<input type = "text" id = "imei" /></p> 
 

 
<p><label>S/N</label> 
 
<input type = "text" id = "serial" /></p> 
 

 
<button type="submit" onclick="showInput2();">Submit</button><br/> 
 
<p><textarea name="device details" cols="33" rows="5" id='display2'> 
 
</textarea></p>

Answer 2

只是在你的文本類型添加值的屬性來實現。

<p><label>Model</label> 
<input type = "text" id = "model" value="test value"/></p> 

同爲他人文本類型。

Answer 3

$(document).ready(function(){ 
    $("input").val(""); 
    $("input").on('change', function(event){ 
    id = event.target.id; 
    var value = id + ":" + event.target.value; 
    $('#' + id).val(value); 
    }); 
}) 

添加到您的JavaScript ..這會得到輸入的id點擊和新的價值附加到用冒號follwed ID和newwly enetered值。

改變你的HTML

<p><label>Model</label> 
<input type = "text" id = "Model" value="Model"/></p> 

<p><label>IMEI</label> 
<input type = "text" id = "IMEI" value="IMEI"/></p> 

<p><label>S/N</label> 
<input type = "text" id = "Serial" value = "Serial"/></p>