Блог

Главная - Вопросы по программированию - Показывать поле и не исчезать, пока на нем находится мышь

Показывать поле и не исчезать, пока на нем находится мышь

#javascript

#javascript

Вопрос:

Показывать поле и его ось, пока на нем находится мышь

Привет, поле отображается при нажатии клавиши ввода. Проблема в том, что когда я пытаюсь щелкнуть по номерам полей, когда отображается поле, поле скрыто.

Друзья, как я могу решить эту проблему?

 function show1() {
    document.getElementById("box1").style.display="block"
}

function hide() {
    document.getElementById("box1").style.display="none"
}

function volcal(a) {
    document.querySelector("#number").value=a
} 
 #number {
   opacity: 30%;
   padding: 3px;
}

 #number:hover {
   opacity: 100%;
   border-color: #ff0000;
   border-width: 1px;
   color: #0064ff;
}

#box1 {
   display: none;
   width: 30.5%;
   margin-right: 13px;
   padding: 3px;
   text-align: center;
   border-style: solid;
   border-color: #3b3b3b;
} 
 <input id="number"  onblur="hide()" onfocus="show1()"  min="0" >

<span id="box1" style="display: non;"  onmouseout="hide()" onmouseover="show1()"> value =  
    <span class="me1" onclick="volcal(this.innerHTML)">
        1,000
    </span>
    <span class="wbb3" > | </span>
    <span class="me1"  onclick="volcal(this.innerHTML)">
        10,000
    </span>
</span>

Ответ №1:

Вместо того, чтобы использовать событие mouse out для скрытия элемента, вы можете использовать щелчок по прозрачному фоновому div, который заполняет весь экран, поэтому, когда вы нажимаете вне поля, оно скрывается.

 function show1() {
    document.getElementById("box1").style.display = "block";
    document.getElementById("back-layer1").style.display = "block";
}

function hide() {
    document.getElementById("box1").style.display = "none";
    document.getElementById("back-layer1").style.display = "none";
}

function volcal(a) {
    document.querySelector("#number").value = a;
} 
 #number {
    opacity: 30%;
    padding: 3px;
    position: relative;
    z-index: 100;
}

#number:hover {
    opacity: 100%;
    border-color: #ff0000;
    border-width: 1px;
    color: #0064ff;
}

#box1 {
    display: none;
    width: 30.5%;
    margin-right: 13px;
    padding: 3px;
    text-align: center;
    border-style: solid;
    border-color: #3b3b3b;
    z-index: 100;
    position: relative;
}

#back-layer1 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent; /* change to red to see the behavior */
    z-index: 10;
} 
 <div>
    <div id="back-layer1" style="display: none" onclick="hide()"></div>
    <input id="number" onfocus="show1()" min="0" />
    <span id="box1" style="display: non" onmouseover="show1()">
        value =
        <span class="me1" onclick="volcal(this.innerHTML)"> 1,000 </span>
        <span class="wbb3"> | </span>
        <span class="me1" onclick="volcal(this.innerHTML)"> 10,000 </span>
    </span>
</div>

Комментарии:

1. Можете ли вы сказать мне, как выполнить эти коды с помощью jquery? @leo

2. @BestFriday вы можете изменить отображение и скрытие тела функций на: $("#box1, #back-layer1").show() а $("#box1, #back-layer1").hide() также вы можете изменить присвоение значения на: $("#number").val(a) . Я не редактировал вопрос, потому что думаю, что это выйдет за рамки, но надеюсь, что это поможет вам

3. @BestFriday проверьте эту скрипку: jsfiddle.net/2o3v6jn4