Home > Article > Web Front-end > Detailed explanation of the use of jquery event change()

Detailed explanation of the use of jquery event change()

黄舟Original: 2018-05-15 10:12:389805browse

This article mainly introduces the usage of change() in jquery. It analyzes the function, definition and specific usage skills of change with examples. It is of great practical value. Friends who need it can refer to it

The example of this article analyzes the usage of change() in jquery. Share it with everyone for your reference. The specific analysis is as follows:

change() When the value of an element changes, a change event occurs. This event only applies to text fields, and textarea and select elements.
When used with select elements, the change event occurs when an option is selected. When used with a text field or text area, this event occurs when the element loses focus.
1. Usage of change

1. Trigger change event: trigger change event of selected element

Syntax: $(selector).change()

2. Bind the function to the change event: specify the function to be run when the change event of the selected element occurs.

Syntax: $(selector).change(function)

2. Example of change() in jquery

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
 $("button").click(function(){
  $("input").change();
 });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>

oninput,onpropertychange,## Usage of #onchange

l The onchange trigger event must meet two conditions:

a) The properties of the current object change and it is triggered by a keyboard or mouse event (script triggering is invalid)

B) The current object is lost (onblur);

L onPropertyChange, as long as the current object attribute changes, it will trigger an event, but it is exclusive to IE; l Oninput is a non-

IE browser

version of onpropertychange. It supports browsers such as Firefox and Opera, but there is one difference. When it is bound to an object, not all property changes of the object can trigger events. It only It works when the object value changes.

In textarea, if you want to capture the user's keyboard input, you can use onkeyup to check the event. However, onkeyup does not support copying and pasting, so you need to dynamically monitor the changes in the value in the textarea, which requires onpropertychange( Used in IE browser) and oninput (non-IE browser) are used together.

Onpropertychange bug

During the code implementation, it was found that when responding to the user onclicking the textarea, if obj.className="XX"; is used to change the font style in the textarea input box, it will As a result, there will be a bug in IE that onpropertychange will not be triggered when the first character is entered, so it needs to be set like this: obj.style.color="#000";

Let’s talk about jquery first, use the jQuery library If so, you only need to bind the oninput and onpropertychange events at the same time. Sample code:

$(&#39;#username&#39;).bind(&#39;input propertychange&#39;, function() {    
$(&#39;#content&#39;).html($(this).val().length + &#39; characters&#39;);});

The above is the detailed content of Detailed explanation of the use of jquery event change(). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Pagination component based on jQuery encapsulationNext article：Pagination component based on jQuery encapsulation

See more

Detailed explanation of the use of jquery event change()

Related articles