使用jQuery检查是否在输入元素中输入了值 [英] Check with jQuery if a value in an input element was entered
问题描述
首先，我检查了与我的问题类似的每个主题，但不幸的是，我还没有找到答案.我试图合并一些答案，但没有成功. (注意:刚开始学习jQuery)
First of all, I checked every topic similar to my problem, unfortunately, I haven't found my answer yet. I tried to combine some of the anwers, but I had no succes. (note: just started to learn jQuery)
这是我的问题:
我创建了一个包含四个文本输入和一个按钮的表单.每个输入内部都有一个svg图标和一个占位符文本.
I created a form with four text inputs and a button. Each input has a svg icon inside it and a placeholder text.
HTML:
<div class="first-field">
<input class="text" type="text" placeholder="Uw naam.." value="">
<svg class="unfilled" id="svg_user">
</svg>
</div>
(由于无关紧要，我删除了svg数据.)
(I removed the svg data since it's irrelevant.)
svg图标的颜色与占位符的颜色相同.输入的文字颜色略浅.我想将svg图标的颜色更改为与输入的文本相同的颜色，但是仅在输入内容时更改.
The svg icon is the same color as the placeholder. The entered text color is a bit lighter. I want to change the color of the svg icon to the same color as the entered text, but ONLY when something is entered.
首先，我尝试在输入内容时触发警报，以检查它是否知道何时输入内容.我使用了jQuery网站上的示例:
First I tried to fire an alert when something is entered, to check if it knows when something was entered. I used an example from the jQuery website :
$( ".text" ).change(function() {
alert( "Handler for .change() called." );
});
这不起作用，并且根据文档，它应该起作用.
This did not work and, accordingly to the documentation, it should.
我在堆栈上找到了此解决方案，但这也行不通:
I found this solution on stack, but that also won't work:
$(document).ready(function () {
$('.text').keyup(function () { alert('test'); });
});
没有警报，我无法继续寻求解决方案. 快速摘要:
Without the alert, i can't continue building towards a solution. Quick summary:
SVG图标需要更改为与输入文本相同的颜色，但仅在输入内容时才更改.删除后，应改回占位符文本的颜色.
SVG icon needs to change to the same color as the entered text, but ONLY when something is entered. When deleted it should change back to the color of the placeholder text.
现在，谢谢大家的帮助.
For now, I thank you all for the help.
推荐答案
之所以需要将代码包装在document.ready包装器中的原因是，因为代码想要在其立即运行 已加载.通常，代码会在创建DOM之前运行(即页面已完全呈现)，因此代码需要访问的某些元素尚不存在，并且代码会中断.
The reason for need to wrap code in a document.ready wrapper, is because the code wants to run instantly, the moment it is loaded. Usually, the code runs before the DOM has been created (i.e. the page has been fully rendered) -- so some of the elements the code needs to access are not there yet -- and the code breaks.
以下是使用document.ready包装器的示例:
Here is an example of using a document.ready wrapper:
HTML:
<div class="first-field">
<input class="text" type="text" placeholder="Uw naam.." value="" />
<svg class="unfilled" id="svg_user"></svg>
</div>
javascript/jQuery:
var ran=0;
$(document).ready(function() {
$('.text').keyup(function(e) {
if (ran == 0){
ran++;
alert('test');
}
});
}); //END document.ready
但是，如果HTML是通过javascript或AJAX(通过.load())或类似方式注入的，则用户事件将不会触发任何代码运行.
However, if the HTML has been injected via javascript or through AJAX (via .load()) or something like that, then the user events will not trigger any code to run.
在这种情况下，有一个简单的解决方案:使用jQuery的.on()方法.
In that case, there is a simple solution: use jQuery's .on() method.
var ran=0;
$(document).ready(function() {
$(document).on('keyup', '.text', function(e) {
if (ran == 0){
ran++;
alert('test');
}
});
}); //END document.ready
上面的小变化:
$(document).on('keyup', '.text', function(e) {
将事件处理程序绑定到文档本身，并告诉它监视涉及类.text的元素的所有keyup事件.
binds the event handler to the document itself, and tells it to watch for any keyup events involving the element with class .text.
其中一个应该可以正常工作.
One of those should work fine.
请注意，为您构造的示例包含一个CHECK，因此keyup操作不会被执行多次.您可以删除它，并让代码在每次按键时都执行某些操作:
Notice that the example constructed for you includes a CHECK so that the keyup action is not performed more than once. You can remove that and have the code do something with every keypress:
$(document).ready(function() {
$('.text').keyup(function(e) {
alert('test');
});
}); //END document.ready
这篇关于使用jQuery检查是否在输入元素中输入了值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
