Question

我有以下HTML

＆＃13;

<form id="project-filter" class="aui ajs-dirty-warning-exempt">
  <div class="project-filter-item">
    <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter-  text text" value="">
  </div>
</form>

＆＃13;

这是页面上的搜索框（文本）字段。我有一个JS函数，每次加载页面时都会运行。页面的内容就像一个表格（标题和表格数据）。但是，在“搜索”框中输入内容时，JS功能无法正常运行。（只执行标题，脚本不在表体中运行）

所以我想每次输入一个字母时都要运行JS函数。

为此，我试图做以下事情，但它不起作用。

＆＃13;

AJS.$('#project-filter-text').on('input', function() {
  // Call my JS function.
  setTimeout(removeProjectTypes, 0005);
  return true;
});

＆＃13;

而且：

＆＃13;

AJS.$('#text').keyup(function(event) {
  if(AJS.$('#text').val() == true) {       
    // Call my JS function here
  }
});

＆＃13;

有关我应该怎么做的任何建议？

Answer 1

＆＃13;

<form id="project-filter" class="aui ajs-dirty-warning-exempt">
  <div class="project-filter-item">
    <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter-  text text" value="">
  </div>
</form>


$('#project-filter').on('keyup', function() {
console.log('This will run each time :)');
});

＆＃13;

试试：）

Answer 2

你可以尝试

<input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter-  text text" value="" onkeyup="myFunc()">


function myFunc()
{
 alert('ok')
}

Answer 3

使用<form id="project-filter" class="aui ajs-dirty-warning-exempt"> <div class="project-filter-item"> <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value="" onkeyup=search()> </div> </form>：

function search() {
   console.log('run');
}

将您的函数添加到js文件中：

bitlasoft@Bitlasoft-TS-22:~/test01$ bundle exec kiba movies.etl
{
    "title: Blade Runner" => "title: Minority Report"
}
/home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/themoviedb-1.0.1/lib/themoviedb/api.rb:37:in `set_response': Tmdb::InvalidApiKeyError (Tmdb::InvalidApiKeyError)
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/themoviedb-1.0.1/lib/themoviedb/search.rb:75:in `fetch_response'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/themoviedb-1.0.1/lib/themoviedb/search.rb:60:in `fetch'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/themoviedb-1.0.1/lib/themoviedb/resource.rb:41:in `search'
    from /home/bitlasoft/test01/common.rb:30:in `process'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/runner.rb:35:in `block (3 levels) in process_rows'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/runner.rb:34:in `each'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/runner.rb:34:in `block (2 levels) in process_rows'
    from /home/bitlasoft/test01/common.rb:12:in `block in each'
    from /home/bitlasoft/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/csv.rb:1739:in `each'
    from /home/bitlasoft/test01/common.rb:11:in `each'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/runner.rb:33:in `block in process_rows'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/runner.rb:32:in `each'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/runner.rb:32:in `process_rows'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/runner.rb:13:in `run'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/lib/kiba/cli.rb:13:in `run'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/gems/kiba-0.6.1/bin/kiba:5:in `<top (required)>'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/bin/kiba:23:in `load'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/bin/kiba:23:in `<main>'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `eval'
    from /home/bitlasoft/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `<main>'
bitlasoft@Bitlasoft-TS-22:~/test01$

Answer 4

我不知道ajs是什么，但是使用jquery你可以使用on方法来等待事件

jQuery.keyup()

有时候我也有问题，connect.php没有用。不要问我为什么不。

Answer 5

$('#project-filter-text').keypress(function(e) {
  if (e.which !== 0) {
    console.log(String.fromCharCode(e.which));
    //Logic here
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="project-filter" class="aui ajs-dirty-warning-exempt">
  <div class="project-filter-item">
    <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter-  text text" value="">
  </div>
</form>

Answer 6

如果像我一样，您需要在每次输入字母时触发的内容，请尝试oninput：

<textarea oninput="console.log(this.value)"></textarea>

keyup不太有效。例如，尝试以下MCVE：

<textarea onkeyup="console.log(this.value)"></textarea>

如果您只需轻按每个键，它就可以正常工作。但是按住不放，您会遇到问题：每次释放键一次，都会触发一次，而不是每次输入字母时触发一次。

如何在搜索/文本框字段中输入的每个字母上运行JavaScript？

6 个答案: