文章导航

JavaScript prompt()

2018-9-22 13:11| 作者: admin| 查看: 843| 评论: 0|来自: 蚂蚁部落

调用此方法可以弹出一个对话框, 此对话框具有文本输入功能,且具有确定和取消按钮。

两个按钮的具体功能后面会有代码实例演示。

prompt方法与alert和confirm两个方法类似。

异同点如下:

(1).都可以弹出一个框。

(2).prompt方法弹出的框具有文本输入功能,alert和confirm不能输入文本。

更多window对象内容参阅JavaScript window 对象一章节。

特别说明:window对象方法都可以直接使用,无需使用window调用。

语法结构:

[JavaScript] 纯文本查看 复制代码
prompt(text,defaultText)

参数解析:

(1).text:可选,对话框的提示文本,通常用于对用户输入文本内容的提示。

(2).defaultText:可选,默认输入的文本内容。

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload = function () {
  let odiv = document.getElementById("ant");
  let obt=document.getElementById("bt");
  bt.onclick = function () {
    let txt = prompt("请输入文本", "蚂蚁部落");
    odiv.innerHTML = txt;
  }
}
</script> 
</head>
<body> 
<div id="ant"></div>
<input type="button" value="点击查看演示" id="bt" />
</body>
</html>

上面代码实现了对prompt方法的演示效果,下面介绍一下实现过程。

(1).点击按钮之后,触发click事件。

(2).然后执行事件处理函数,运行到let txt = prompt("请输入文本", "蚂蚁部落"),那么会弹出一个对话框。

截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/22/131247paindr53ec57xj6g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特别说明:在不同的浏览器,弹出框的外观可能会有所不同。

方法中两个参数的作用已经很明显了。

如果感觉默认的内容不满意,那么我们可以填写其他内容,比如"蚂蚁一样奋斗"。

点击确定按钮,那么prompt方法的返回值就是输入或者默认的文本内容。

如果点击取消按钮,方法的返回值是null。

最后总结:

(1).弹出框可以输入文本内容。

(2).点击确定,方法返回输入的文本内容,点击取消返回null。

通常自带的功能都是比较丑陋的,为了提高美观度和灵活性,通常需要模拟实现。

关于更加漂亮的弹出框效果可以在特效下载版块弹出层分类中查找。


鲜花

握手

雷人

路过

鸡蛋
上一篇:window.parent下一篇:JavaScript Math.SQRT2

最新评论

返回顶部