### 关于JavaScript Input
Question Usage Example
在网页开发中，`prompt
()` 函数用于显示可提示用户输入的对话框。此函数返回用户输入作为字符串，因此对于特定操作可能需要转换数据类型[^2]。
下面是一个简单的例子展示如何使用 `prompt
()` 获取用户的姓名并将其显示出来：
```html
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt</h2>
<p id="demo"></p>
<script>
// 使用 prompt
() 获取用户的名字
var person = prompt
("请输入您的名字", "Harry Potter"
);
if
(person != null && person !== ""
) {
document.getElementById
("demo"
).innerHTML =
"你好 " + person + "! 欢迎来到我的网站";
} else {
document.getElementById
("demo"
).innerHTML =
"您取消了输入或者未填写内容.";
}
</script>
</body>
</html>
```
另一个场景是在表单验证期间询问确认信息。例如，在提交之前让用户再次确认其电子邮件地址是否正确无误：
```javascript
function validateEmail
(emailField
){
var regEx = /^
([a-zA-Z0-9_.+-]
)+\@
(([a-zA-Z0-9-]
)+\.
)+
([a-zA-Z0-9]{2,4}
)+$/;
if
(!regEx.test
(emailField.value
)) {
emailField.setCustomValidity
('邮箱格式不合法'
);
} else {
let confirmEmail = prompt
("请重新输入一次邮件地址以确认:", emailField.value
);
if
(confirmEmail.toLowerCase
() === emailField.value.toLowerCase
()){
emailField.setCustomValidity
(''
);
}else{
emailField.setCustomValidity
('两次输入的邮箱地址不同，请重试.'
);
}
}
}
document.querySelector
('#email'
).addEventListener
('input', function
(event
){
validateEmail
(event.target
);
}
);
```
当涉及到更复杂的交互逻辑时，可以结合条件语句来创建嵌套结构，从而实现更加精细的功能控制。比如先判断某个条件下再执行另一层条件下的动作。
#### 创建动态HTML元素并与之互动
除了基本的数据收集外，还可以利用 JavaScript 动态地向页面添加新的 `<input>` 元素，并设置它们不可见或可见的状态。这可以通过修改这些元素的样式属性完成，如通过改变 display 或 visibility 属性使其隐藏或显现[^1]。
```javascript
let newInput = document.createElement
("INPUT"
);
newInput.setAttribute
("type", "text"
);
newInput.style.display = 'none'; // 默认情况下隐藏新创建的文本框
// 插入到DOM树中的适当位置之前
someElement.before
(newInput
);
// 当满足某些条件时使该字段变得可见
if
(someConditionIsTrue
){
newInput.style.display = ''; // 清除display:none; 让它按照默认方式呈现
}
```
上述代码片段展示了如何根据程序运行状态的变化调整界面布局以及响应用户行为的方式之一。
博客提到一个神奇现象，即li设置高度为0时，里面的img图片仍能显示，涉及前端页面元素显示相关信息技术问题。
扫一扫
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
