style.border属性用于改变元素的边框，它返回元素的三个border-bottom属性，即border-color、border-style和border-width 。它是 HTML 样式对象属性之一。
我们使用 onchange 事件使更改在填写框后生效。 onchange 是 JavaScript 属性之一，当 HTML 元素的值发生更改时就会发生。当选中状态更改时，它还可以与单选按钮和复选框一起使用。
onchange 事件还可以与 HTML 元素一起使用。 onchange 事件与 oninput 事件非常相似。但是 oninput 事件在元素的值更改后立即发生，而 onchange 事件在元素失去焦点时发生。
在本文中，我们将了解如何在使用 JavaScript 填充输入框后更改输入框边框。
语法
以下是 style.border 属性的语法，用于在填充框后更改输入框边框 –
object.style.border = "width style color|initial|inherit"
参数
-
width – 用于设置边框宽度。我们可以将宽度值传递为“厚”、“薄”、“中”或以 px 为单位的值（即 10px）。
-
style – 用于设置边框样式。我们可以将样式值传递为“solid”、“dotted”、“double”等。
-
color – 用于设置边框颜色。
-
initial – 用于将属性设置为默认值。
-
inherit – 用于从父元素继承属性。
返回值
样式边框返回一个字符串值，该值代表元素边框的颜色、宽度和样式。
步骤
填充框后，我们应该按照以下给出的步骤更改输入框边框 –
-
第 1 步 – 定义表单元素，其中包含文本和按钮类型的输入字段。
-
步骤 2 – 脚本代码定义了填充框后更改输入框边框的功能。
-
第 3 步 – 在 JavaScript 部分中，声明了 onchange 事件，该事件在元素的值更改时发生。
-
步骤 4 – style.border 是 HTML DOM 背景属性，用于更改底部边框的元素。
-
步骤 5 – 每当用户向输入值添加一些值时，就会触发 onchange 事件，并且当触发该事件时，该值会检查它是否为 null。如果该值存在且不为空，则边框底部将更改为绿色点线。
示例
在下面的示例中，我们使用 JavaScript 将第一个输入框填充后的边框更改为“10px 纯绿色”，将第二个输入框边框更改为“3px 点状红色”。
<html>
<body style="text-align: center;">
<h2>Changing the Borders of Input Box after filling the Box</h2>
<!--defining the form-->
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.border = "10px solid green";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.border = "3px dotted red";
}
};
</script>
</body>
</html>
示例
仅更改输入框的下边框
在本例中，我们使用样式 borderBottom 属性来更改输入框的下边框。为了使更改生效，我们使用 onchange 事件属性。
<html>
<body style="text-align: center;">
<h2>Changing the bottom border of Input Box after filling the box</h2>
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.borderBottom = "thick solid #00ff00";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.borderBottom = "3px dotted green";
}
};
</script>
</body>
</html>
结论
在本文中，我们通过示例演示了如何在填充输入框后更改输入框的边框。我们已经看到了棕褐色的示例，每当我们在两个输入字段中输入文本时，底部边框就会更改为绿色。如果两个输入字段中的值为空，则颜色不会改变，只有当该值存在时才会改变。
以上就是如何使用 JavaScript 填充输入框后更改输入框边框？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 JavaScript 填充输入框后更改输入框边框？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
