improve(frontend): only trigger `onblur` when needed

.gitignore

@@ -11,4 +11,5 @@ pywebio/html/js/pywebio.min.*
 /build
 /dist
 /*.egg-info
-/docs/_build
+/docs/_build
+/archive

docs/spec.rst

@@ -80,6 +80,7 @@ The ``inputs`` field is a list of input items, each input item is a ``dict``, th
 * type: Input type, required.
 * name: Identifier of the input field, required.
 * onchange: bool, whether to push input value when input change
+* onbulr: bool, whether to push input value when input field `onblur`
 * auto_focus: Set focus automatically. At most one item of ``auto_focus`` can be true in the input item list
 * help_text: Help text for the input
 * Additional HTML attribute of the input element

pywebio/input.py

@@ -97,14 +97,20 @@ def _parse_args(kwargs, excludes=()):
     """
     kwargs = {k: v for k, v in kwargs.items() if v is not None and k not in excludes}
     assert is_html_safe_value(kwargs.get('name', '')), '`name` can only contains a-z、A-Z、0-9、_、-'
+
     kwargs.update(kwargs.get('other_html_attrs', {}))
     kwargs.pop('other_html_attrs', None)
+
+    if kwargs.get('validate'):
+        kwargs['onblur'] = True
     valid_func = kwargs.pop('validate', lambda _: None)
+
     if kwargs.get('onchange'):
         onchange_func = kwargs['onchange']
         kwargs['onchange'] = True
     else:
         onchange_func = lambda _: None
+
     return kwargs, valid_func, onchange_func
 
 

webiojs/src/models/input/checkbox_radio.ts

@@ -53,9 +53,11 @@ export class CheckboxRadio extends InputItem {
         let inputs = elem.find('input');
         for (let idx = 0; idx < options.length; idx++) {
             let input_elem = inputs.eq(idx);
-            input_elem.on("blur", (e) => {
-                this.send_value_listener(this, e);
-            });
+            if(this.spec.onblur) {
+                input_elem.on("blur", (e) => {
+                    this.send_value_listener(this, e);
+                });
+            }
             if(this.spec.onchange){
                 input_elem.on("change", (e) => {
                     this.send_value_listener(this, e);

webiojs/src/models/input/input.ts

@@ -54,11 +54,13 @@ export class Input extends InputItem {
         });
 
         let input_elem = this.element.find('input');
-        // blur事件时，发送当前值到服务器
-        input_elem.on("blur", (e) => {
-            if(this.get_value())
-                this.send_value_listener(this, e)
-        });
+        if(spec.onblur){
+            // blur事件时，发送当前值到服务器
+            input_elem.on("blur", (e) => {
+                if(this.get_value())
+                    this.send_value_listener(this, e)
+            });
+        }
         if(spec.onchange){
             input_elem.on("input", (e) => {
                 this.send_value_listener(this, e, 'change');

webiojs/src/models/input/select.ts

@@ -34,10 +34,12 @@ export class Select extends InputItem {
         this.element = $(html);
         this.setup_select_options(this.element, spec.options);
 
-        // blur事件时，发送当前值到服务器
-        this.element.find('select').on("blur", (e) => {
-            this.send_value_listener(this, e);
-        });
+        if(spec.onblur) {
+            // blur事件时，发送当前值到服务器
+            this.element.find('select').on("blur", (e) => {
+                this.send_value_listener(this, e);
+            });
+        }
         if(spec.onchange){
             this.element.find('select').on("change", (e) => {
                 this.send_value_listener(this, e);