js控制输入框取得焦点时另一内容显示/隐藏_js 获取焦点当前显示其他隐藏-优快云博客

本文链接：https://blog.youkuaiyun.com/qzjn123456789/article/details/77717795

这篇博客介绍了如何使用JavaScript来控制输入框获取焦点时，页面上的特定内容显示或者隐藏，从而提升用户体验。通过监听输入框的focus和blur事件，可以实现相应元素的动态显示和隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面内容：

<input name="prodDesc" type="text" placeholder="点击此处输入备注" class="input_text" id="prodDesc"/>

<div class="keyboard open" id="keyboard">
          <a class="key left-0 top-0" data-code="1"><span>1</span></a>
          <a class="key left-1 top-0" data-code="2"><span>2</span></a>
          <a class="key left-2 top-0" data-code="3"><span>3</span></a>
          <a class="key left-0 top-1" data-code="4"><span>4</span></a>
          <a class="key left-1 top-1" data-code="5"><span>5</span></a>
          <a class="key left-2 top-1" data-code="6"><span>6</span></a>
          <a class="key left-0 top-2" data-code="7"><span>7</span></a>
          <a class="key left-1 top-2" data-code="8"><span>8</span></a>
          <a class="key left-2 top-2" data-code="9"><span>9</span></a>
          <a class="key left-0 top-3" id="keyboard-down"><i class="lh-keyboard-down"></i></a>
          <a class="key left-1 top-3" data-code="0"><span>0</span></a>
          <a class="key left-2 top-3" data-code="."><span>.</span></a>
          <a class="key left-3 top-0" data-code="backspace"><i class="lh-ion-backspace-outline"></i></a>
          <a class="key left-3 top-1 height-2 submit disabled text" id="submit"><span class="loader-origin">支付</span><div class="loader">加载中</div></a>
 </div>

js内容：

<script type="text/javascript">
//自动显/隐提示  
$(function() {
    
    $('.input_text').bind("focus",function(){  
        $('#keyboard').hide();  
    });  
      
    $('.input_text').bind('blur',function(){  
        $('#keyboard').show();  
    });  
});  
</script>