Попробуйте вызвать событие в javaScript по userinput

Новичок для JavaScript здесь. Я попытался написать программу, которая, когда пользователь вводит текст «F» в тексте, появляется скрытый шар. Однако это просто не работает. Надеюсь, кто-то может мне помочь. Заранее спасибо. Вот мой HTML, CSS, JS ниже: -Попробуйте вызвать событие в javaScript по userinput

$(document).ready(function() { 
 
\t  $('#input').on('keyup', function(){ 
 
\t \t  var textInput = $(this).val().trim.toLowerCase(); 
 
\t \t  if(textInput = "F") { 
 
\t \t \t  $('#F2').trigger('click'); 
 
\t \t  } 
 
\t  }); 
 
\t  $('#F2').on('click', function() { 
 
\t \t  $('#F2').show(); 
 
\t  }); 
 
    });

#F2{ 
 
    \t  width: 10px; 
 
\t  height: 10px; 
 
\t  background: #ccc; 
 
\t  border: 2px solid #ccc; 
 
\t  border-radius: 50%; 
 
    } 
 

 
    .not_shown { 
 
\t  display: none; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <link type="text/css" rel="stylesheet" href="code.css"> 
 
\t  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
     <script type="text/javascript" src="code_js.js"></script> 
 
    </head> 
 
    <body> 
 
\t  <div id = "ball"> 
 
\t \t  <input type="text" id="input"> 
 
\t \t  <div id = "F2" class = "not_shown"></div> 
 
\t  </div> 
 
    </body> 
 
    </html>

источник

2016-11-20 vkosyj

'if (textInput =" F ")' должно быть 'if (textInput ==" F ")' – Mahi

Проверьте эту ссылку: -http: //www.w3schools.com/jquery/event_trigger.asp –

как другие указали в своих ответах, кроме ошибки операнда в вашем условном выражении if, условие никогда не будет оцениваться как 'true'. Кроме того, захват на 'keyup' предоставляет дополнительные соображения .. потому что модификаторы и другие управляющие символы, которые не меняют значения, закроют событие. –

I» вы сделали это здесь. Надеюсь это поможет.

// if you do not care whether the 'F' is capital or simple 
 
/*$('#input').keydown(function(e) { 
 
    if (e.keyCode == '70') { 
 
    $('#ball').addClass('shown'); 
 
    } else { 
 
    $('#ball').removeClass('shown'); 
 
    } 
 
});*/ 
 

 
// if you care whether 'F' is capital or simple 
 
$('#input').keyup(function() { 
 
    if ($('#input').val() == 'F') { 
 
    $('#ball').addClass('shown'); 
 
    } else { 
 
    $('#ball').removeClass('shown'); 
 
    } 
 
});

.ball { 
 
    background-color: red; 
 
    border-radius: 100%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-top: 50px; 
 
    display: none; 
 
} 
 

 
.ball.shown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="input" type="text"> 
 
<div id="ball" class="ball"></div>

Также проблема с вашим кодом, что

если (TextInput = "F")

потребности быть

если (TextInput == " F ")

как в сравнении d вы должны изменить

$ (this) .val(). trim.toLowerCase();

$ (это) .val()

При изменении значения в нижний регистр вы никогда не будете иметь 'F' для значения, оно всегда будет 'е'.

Еще одна вещь, я использовал здесь другой подход, не запуская событие клика, как вы это делали. Я думаю об этом как о более чистом подходе к достижению того, что вы делаете.

источник

2016-11-20 06:19:42 Ishara

Спасибо. Я думаю, что ваше решение очень аккуратно! – vkosyj

этот код ошибки, вы должны использовать как этот var textInput = $(this).val().trim();

$(document).ready(function() { 
 
    $('#input').on('keyup', function(){ 
 
     var textInput = $(this).val().trim(); 
 
     console.log(textInput) 
 
     if(textInput == "F") { 
 
      $('#F2').trigger('click'); 
 
     } 
 
    }); 
 
    $('#F2').on('click', function() { 
 
     $('#F2').show(); 
 
    }); 
 
});

#F2{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ccc; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
.not_shown { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link type="text/css" rel="stylesheet" href="code.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
    <script type="text/javascript" src="code_js.js"></script> 
 
</head> 
 
<body> 
 
    <div id = "ball"> 
 
     <input type="text" id="input"> 
 
     <div id = "F2" class = "not_shown"></div> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-11-20 06:11:43

Зачем делать регистр нечувствительным? кажется, неправильно затрагивает проблему. –

@BrettCaswell Извините, я просто скопирую этот код из проблемы. Я изменю его, чтобы исправить. –

Я был частично некорректным здесь. Я не понимал, что OP уже делает его нечувствительным к делу с использованием 'toLowerCase()'. Ваша реализация имеет столько же заслуг и его намерение. Но @Murat определил как проблемы в его ответ. –

$(document).ready(function() { 
 
    $('#input').on('keyup', function(){ 
 
     var textInput = $(this).val().trim(); 
 
     if(textInput == "F") { 
 
      console.log(1); 
 
      $('#F2').trigger('click'); 
 
     } 
 
    }); 
 
    $('#F2').on('click', function() { 
 
     $('#F2').show(); 
 
    }); 
 
});

#F2{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ccc; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
.not_shown { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link type="text/css" rel="stylesheet" href="code.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
</head> 
 
<body> 
 
    <div id = "ball"> 
 
     <input type="text" id="input"> 
 
     <div id = "F2" class = "not_shown"></div> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-11-20 06:20:11 Mahi

Заметьте, что он сработает, если вы нажмете любой ключ ctrl здесь (например, shift, в то время как значение '' F "') –

@BrettCaswell Я думаю, что OP нужно, потому что он использовал метод обрезки. – Mahi

потенциально, да ... но это должно быть очевидно ... этот фрагмент гарантирует, что он сгорит это событие дважды .. shift + f .. release f (пожары) .. release shift (пожары) .. –

1) Вы превратили его в нижнем регистре; но если заявление, вы определили верхнюю F

2) Если заявление wrong.Take посмотрите следующий один

if(textInput == "f")

Это верно, если заявление.

источник

2016-11-20 06:47:59

Попробуйте вызвать событие в javaScript по userinput

ответ

Смежные вопросы