input点击后placeholder中的提示消息消失

简介: input点击后placeholder中的提示消息消失

需求:在开发的时候我们需要实现input点击后placeholder中的提示消息消失

这个时候就需要用到除了placeholder之外的另外一种onfocus="this.placeholder=''" onblur="this.placeholder"属性了

例如:在实现计算器的案例中:

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
    
    var oTxt1 = document.getElementById("txt1").value;
    var oTxt2 = document.getElementById("txt2").value;
    var oSlt = document.getElementById("select").value;
    var result = "";
    switch(oSlt) {
    
        case "+":
            result = parseFloat(oTxt1) + parseFloat(oTxt2);
            break;
        case "-":
            result = parseFloat(oTxt1) - parseFloat(oTxt2);
            break;
        case "*":
            result = parseFloat(oTxt1) * parseFloat(oTxt2);
            break;
        default:
            result = parseFloat(oTxt1) / parseFloat(oTxt2);
    }
    document.getElementById("fruit").value = result;

   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' placeholder="请输入第一个数" onfocus="this.placeholder=''" onblur="this.placeholder" /> </br>
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select></br>
   <input type='text' id='txt2' placeholder="请输入第二个数" onfocus="this.placeholder=''" onblur="this.placeholder" /> </br>
   <input type='button' value=' = ' onclick=count() /> <!--通过 = 按钮来调用创建的函数,得到结果--> </br>
   <input type='text' id='fruit' placeholder="计算结果即将展示" onfocus="this.placeholder=''" onblur="this.placeholder"  />   </br>
 </body>
</html>
相关文章
Input 标签监听内容输入(change、input 事件区别)
Input 标签监听内容输入(change、input 事件区别)
168 0
input中placeholder的鼠标操作事件
input中placeholder的鼠标操作事件
72 0
|
JavaScript 程序员
input框输入中文时,输入未完成触发事件。Vue中文输入法不触发input事件?
input框输入中文时,输入未完成触发事件。Vue中文输入法不触发input事件?
545 1
|
JavaScript
点击提交按钮,提交所有生成的input参数
点击提交按钮,提交所有生成的input参数
57 0
|
语音技术
解决input中输入中文过程中会触发input事件的问题
解决input中输入中文过程中会触发input事件的问题
163 0
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)
|
JavaScript
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
847 0
|
JavaScript
input 每输入一次都会失去焦点需要再次点击才能输入
出现上述问题其实就是遍历的时候key值绑定的不合理
295 0
html+css实战36-按钮input
html+css实战36-按钮input
98 0
html+css实战36-按钮input
|
前端开发 JavaScript
【Layui】对于input框有时候点击后没有反应
【Layui】对于input框有时候点击后没有反应
653 0
【Layui】对于input框有时候点击后没有反应