声明：本文转载自https://my.oschina.net/u/3754126/blog/1818226，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
在这篇文章里面，我将简单制作一个用户信息输入的页面
【本文不会讲解safe.js每句代码的具体作用，如果想了解请点击此链接：https://gitee.com/skyogo/Safe/wikis/Safe.js】
首先我们先建立一个Demo.html的文件，里面写上基本结构，并用script标签引入safe.js的文件：（Safe.js Gitee链接：https://gitee.com/skyogo/Safe）【safejs版本必须大于3.1.0】
<!DOCTYPE html> <html> <head> <title>Safe.js Demo</title> <meta charset="UTF-8"> </head> <body> <script src="js/Safe.js"></script> <script> window.onload = function(){ } </script> </body> </html>然后我们在body标签里面写上以下代码：
<input id="nameInput" placeholder="请输入名字：" type="text"> <span id="name">你的名字：<span class="val"></span></span> <br> <br> <hr> <input id="ageInput" placeholder="请输入年龄：" type="text"> <span id="age">你的年龄：<span class="val"></span></span> <br> <br> <hr> <select id="cityInput"> <option>北京</option> <option>上海</option> </select> <span id="city">你选择的城市：<span class="val">北京</span></span>我们打开浏览器看下效果：
现在我们再在script标签里面的window.onload事件里写上这样的safejs代码：
new safeInit({ el: "#nameInput", bindHTML: "#name .val" }) new safeInit({ el: "#ageInput", bindHTML: "#age .val" }) new safeInit({ el: "#cityInput", bindHTML: "#city .val" })现在我们打开浏览器看看效果，会发现已经实现了联动了！
Safe.js下载地址：
本文发表于2018年05月24日 20:00
(c)注：本文转载自https://my.oschina.net/u/3754126/blog/1818226，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 2863 讨论 0 喜欢 0
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
万稳万当，不如一默。任何一句话，你不说出来便是那句话的主人，你说了出来，便是那句话的奴隶。 18:22 04月20日 查看详情 |
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |