javascript如何实现输入框内容提示及隐藏功能

小编给大家分享一下javascript如何实现输入框内容提示及隐藏功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

有时输入框较小，希望输入内容后，出现一个有放大输入内容的提示框

实现思路

• 页面上先编写出提示框，然后将提示框的css属性：display设置成none，隐藏起来

• 获取输入框元素对象、信息提示框元素对象

• 为输入框元素对象绑定键盘事件- - -keyup,

• 事件处理程序：判断输入的内容是否为空，不为空- - -将输入框的内容赋值给信息提示框，并设置信息提示框显示：display设置成block；为空，设置提示框不显示

• 添加获取焦点和失去焦点事件。

• blur- - -失去焦点：鼠标不选中输入框，输入框中无光标闪烁时，设置信息提示框不显示：display设置成none

• focus- - -获取焦点：鼠标点击输入框，输入框中有光标闪烁时，判断一下，如果输入框有内容，信息提示框显示；

注意这里是键盘松开事件，不要用键盘按下事件：keydown或keypress，按下时还没有将打的字录入，键盘松开时，才会录入打的字

代码示例：

                        
        
(*´▽｀)ノノ
                    
    

页面效果：

以上是"javascript如何实现输入框内容提示及隐藏功能"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！