Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

一 功能需求:

  弹出窗口,硬盘和内存输入框设置成只读,不可自己输入,IP输入框输入机器IP后,当鼠标点击其他输入框或是其他区域时,通过正确的IP异步获取到机器的硬盘和内存值,填充到硬盘和内存的输入框,如果IP不正确,则在IP输入框下面打印错误信息,待输入正确的ip后,取消错误信息。

二 效果示意:

初始窗口:

 Jquery开发记录1——表单篇(鼠标离开输入框触发操作)Jquery开发记录1——表单篇(鼠标离开输入框触发操作)Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

2 正确效果:

Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

3 错误效果:

 Jquery开发记录1——表单篇(鼠标离开输入框触发操作)Jquery开发记录1——表单篇(鼠标离开输入框触发操作)


三 代码实现:

1 velocity界面代码:

 Jquery开发记录1——表单篇(鼠标离开输入框触发操作)Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

 Jquery开发记录1——表单篇(鼠标离开输入框触发操作)Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

 

2 js代码:

在弹出这个窗口的函数(click())中,进行初始化,在鼠标聚焦离开IP输入框时,触发getDiskAndMem()方法,设置硬盘和内存为只读。

 Jquery开发记录1——表单篇(鼠标离开输入框触发操作)Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

 

以下是getDiskAndMem方法:

Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

Jquery开发记录1——表单篇(鼠标离开输入框触发操作)Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

 Json数据:

Jquery开发记录1——表单篇(鼠标离开输入框触发操作)

Jquery开发记录1——表单篇(鼠标离开输入框触发操作)