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

只需在文字类型中添加值属性即可。

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

其他文字类型相同。

Answer 2

在提交表单之前，请比较用户是否输入了除默认值以外的其他内容。

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 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，并将新值附加到冒号和新旧的值后面的id。

将您的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>

如何显示文本框的默认值，然后在按钮单击后附加输入

3 个答案: