itsscb/wordl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): adds oninput to input fields for Mobile support

Browse Source
This commit is contained in:
itsscb 2024-08-28 13:45:22 +02:00
parent 043db74ea2
commit 4c2bb68c4d
1 changed files with 97 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
frontend/src/pages/home.rs
View File

@ -254,46 +254,106 @@ pub fn Home() -> Html {
let input_values = input_values.clone(); let input_values = input_values.clone();
let node_refs = node_refs.clone(); let node_refs = node_refs.clone();
Callback::from(move |e: KeyboardEvent| { Callback::from(move |e: KeyboardEvent| match e.key().as_ref() {
match e.key().as_ref() { "Enter" => {
"Enter" => { if let Ok(m) = MouseEvent::new("click") {
if let Ok(m) = MouseEvent::new("click") { on_submit.emit(m);
on_submit.emit(m); }
} }
}, "Backspace" => {
"Backspace" => { e.prevent_default();
e.prevent_default();
let index = *curr_index; let index = *curr_index;
let mut values = (*input_values).clone(); let mut values = (*input_values).clone();
values[index] = String::new(); values[index] = String::new();
input_values.set(values); input_values.set(values);
if node_refs[index].cast::<web_sys::HtmlInputElement>().is_some() && index > 0 { if node_refs[index]
let index = index - 1; .cast::<web_sys::HtmlInputElement>()
curr_index.set(index); .is_some()
set_focus(index); && index > 0
} {
}, let index = index - 1;
k if k.len() == 1 && k.chars().all(char::is_alphabetic) => { curr_index.set(index);
let index = *curr_index; set_focus(index);
let mut values = (*input_values).clone(); }
}
k => {
let index = *curr_index;
let mut values = (*input_values).clone();
if k.len() == 1 && k.chars().all(char::is_alphabetic) {
values[index] = k.to_uppercase(); values[index] = k.to_uppercase();
input_values.set(values); input_values.set(values);
if node_refs[index].cast::<web_sys::HtmlInputElement>().is_some() && index < *length { if node_refs[index]
.cast::<web_sys::HtmlInputElement>()
.is_some()
&& index < *length
{
let index = index + 1; let index = index + 1;
curr_index.set(index); curr_index.set(index);
set_focus(index); set_focus(index);
} }
}, } else {
_ => {
let index = *curr_index;
let mut values = (*input_values).clone();
values[index] = String::new(); values[index] = String::new();
input_values.set(values); input_values.set(values);
}, }
}
})
};
let on_input = {
let curr_index = curr_index.clone();
let length = length.clone();
let on_submit = on_submit.clone();
let input_values = input_values.clone();
let node_refs = node_refs.clone();
Callback::from(move |e: InputEvent| {
let event = e.dyn_into::<web_sys::KeyboardEvent>().ok();
if let Some(e) = event.as_ref() {
match e.key().as_ref() {
"Enter" => {
if let Ok(m) = MouseEvent::new("click") {
on_submit.emit(m);
}
}
"Backspace" => {
let index = *curr_index;
let mut values = (*input_values).clone();
values[index] = String::new();
input_values.set(values);
if node_refs[index]
.cast::<web_sys::HtmlInputElement>()
.is_some()
&& index > 0
{
let index = index - 1;
curr_index.set(index);
set_focus(index);
}
}
k => {
let index = *curr_index;
let mut values = (*input_values).clone();
if k.len() == 1 && k.chars().all(char::is_alphabetic) {
values[index] = k.to_uppercase();
input_values.set(values);
if node_refs[index]
.cast::<web_sys::HtmlInputElement>()
.is_some()
&& index < *length
{
let index = index + 1;
curr_index.set(index);
set_focus(index);
}
} else {
values[index] = String::new();
input_values.set(values);
}
}
}
} }
}) })
}; };
@ -405,16 +465,17 @@ pub fn Home() -> Html {
curr_index.set(i); curr_index.set(i);
} }
} }
}) })
}; };
html! { html! {
<input <input
onkeyup={on_enter.clone()} onkeyup={on_enter.clone()}
tabindex={index.to_string()} oninput={on_input.clone()}
ref={node_ref.clone()} tabindex={index.to_string()}
value={input_values[index].clone()} ref={node_ref.clone()}
onfocus={on_focus.clone()} value={input_values[index].clone()}
onfocus={on_focus.clone()}
class={ class={
classes!( classes!(
"w-16", "w-16",