通过Javascript向文本框添加默认值
[英]Add a default value to textbox by Javascript
问题描述
I am trying to add the value to text box but I don't where I am making mistakes. 
我正在尝试将值添加到文本框中，但我不会在哪里犯错误。 Can you guys help with this. 你们可以帮忙吗？ I cannot add the default value in HTML Tag itself. 我无法在HTML标签本身中添加默认值。
<html>
<head>
<script>
$(document).ready(function() {
$("#txtfirstName").val("Your First Name Here!");
$("input[id='txtlastName']").val("Your Last Name Here!");
});
</script>
</head>
<body>
First name:<br>
<input type="text" name="firstname" id="txtfirstName" >
<br>
Last name:<br>
<input type="text" name="lastname" id="txtlastName">
</body>
</html>
FYI: This is just an example page. 仅供参考：这只是一个示例页面。
Please guide me with this. 请指导我这个。 If this post is not related please don't degrade. 如果此帖子无关，请不要降级。 Just let me know, I will delete it. 请告诉我，我会删除它。
Appreciate your help. 感谢您的帮助。
2 个解决方案
解决方案1
0 2016-08-11 20:59:06
If you want to change the value via JavaScript then you have to do it with the following code: 如果要通过JavaScript更改值，则必须使用以下代码执行此操作：
document.getElementById('txtfirstName').value = 'test';
The problem in your case is that you are using JQuery and I can't see an integration of the jQuery source in your case. 在您的情况下，问题是您正在使用JQuery，我无法在您的情况下看到jQuery源的集成。 You have to decide whether you want to do it with JavaScript or jQuery. 您必须决定是否要使用JavaScript或jQuery。
With JavaScript you don't need an external framework but I would prefer jQuery over JavaScript because it is more powerful. 使用JavaScript，您不需要外部框架，但我更喜欢jQuery而不是JavaScript，因为它更强大。
This would be a full example in JavaScript (no framework needed): 这将是JavaScript中的完整示例（无需框架）：
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('txtfirstName').value = 'test';
</script>
</head>
<body>
First name:<br>
<input type="text" name="firstname" id="txtfirstName">
<br>
Last name:<br>
<input type="text" name="lastname" id="txtlastName">
</body>
</html>
With jQuery the same looks like this (integration of the framework in the first line): 使用jQuery看起来像这样（第一行中框架的集成）：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtfirstName").text("Hello world!");
});
</script>
So you can see that jQuery is much simpler and it uses less code then JavaScript. 所以你可以看到jQuery更简单，它使用的代码比JavaScript少。
See it working in this JsFiddle: https://jsfiddle.net/Anokrize/aemy4nea/ 看到它在这个JsFiddle工作： https ：//jsfiddle.net/Anokrize/aemy4nea/
解决方案2
0 已采纳 2016-08-11 20:59:59
You need to encase your JavaScript in a script tag. 您需要将JavaScript包含在脚本标记中。 The following code does what you want: 以下代码执行您想要的操作：
<script
src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#txtfirstName").val("Your First Name Here!");
$("input[id='txtlastName']").val("Your Last Name Here!");
});
</script>
<body>
First name:<br>
<input type="text" name="firstname" id="txtfirstName" />
<br>
Last name:<br>
<input type="text" name="lastname" id="txtlastName" />
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
Also, I changed the way JQuery looks for one of the inputs, so you can see another way of doing it. 此外，我改变了JQuery查找其中一个输入的方式，因此您可以看到另一种方法。
EDIT: If you want to do it not using JQuery, the following will do it in plain JavaScript. 编辑：如果你不想使用JQuery，以下将在纯JavaScript中执行。 It uses an IIFE to encapsulate the load function, so extraneous variables and functions to populate the global object (the window object). 它使用IIFE来封装加载函数，因此填充全局对象（窗口对象）的无关变量和函数。
<script>
(function () {
function init () {
document.getElementById("txtfirstName").value = "Your First Name Here!"
document.getElementById("txtlastName").value = "Your Last Name Here!"
}
window.onload = init;
}())
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.