Fetch value in response to keyup

This key function now works like the input and change events.

Fixes #111
This commit is contained in:
Frank A. Krueger 2018-03-23 13:02:51 -07:00
parent e65b3a335d
commit 3c8893e8f9
No known key found for this signature in database
GPG Key ID: 0471C67474FFE664
3 changed files with 18 additions and 2 deletions

View File

@ -31,6 +31,12 @@ const mouseEvents = {
wheel: true, wheel: true,
}; };
const inputEvents = {
input: true,
change: true,
keyup: true,
};
// Try to close the socket gracefully // Try to close the socket gracefully
window.onbeforeunload = function() { window.onbeforeunload = function() {
if (socket != null) { if (socket != null) {
@ -252,7 +258,7 @@ function msgListen (m) {
id: m.id, id: m.id,
k: m.k, k: m.k,
}; };
if (m.k === "change" || m.k === "input") { if (inputEvents[m.k]) {
em.v = (node.tagName === "INPUT" && node.type === "checkbox") ? em.v = (node.tagName === "INPUT" && node.type === "checkbox") ?
node.checked : node.checked :
node.value; node.value;

View File

@ -77,7 +77,7 @@ namespace Ooui
protected override bool TriggerEventFromMessage (Message message) protected override bool TriggerEventFromMessage (Message message)
{ {
if (message.TargetId == Id && message.MessageType == MessageType.Event && (message.Key == "change" || message.Key == "input")) { if (message.TargetId == Id && message.MessageType == MessageType.Event && (message.Key == "change" || message.Key == "input" || message.Key == "keyup")) {
// Don't need to notify here because the base implementation will fire the event // Don't need to notify here because the base implementation will fire the event
if (Type == InputType.Checkbox) { if (Type == InputType.Checkbox) {
UpdateBooleanAttributeProperty ("checked", message.Value != null ? Convert.ToBoolean (message.Value) : false, "IsChecked"); UpdateBooleanAttributeProperty ("checked", message.Value != null ? Convert.ToBoolean (message.Value) : false, "IsChecked");

View File

@ -46,6 +46,7 @@ namespace Samples
var heading = new Heading ("Todo List"); var heading = new Heading ("Todo List");
var subtitle = new Paragraph ("This is the shared todo list of the world."); var subtitle = new Paragraph ("This is the shared todo list of the world.");
var count = new Paragraph ("0 chars");
var inputForm = new Form { var inputForm = new Form {
ClassName = "form-inline" ClassName = "form-inline"
}; };
@ -61,6 +62,10 @@ namespace Samples
Type = ButtonType.Submit, Type = ButtonType.Submit,
ClassName = "btn btn-danger", ClassName = "btn btn-danger",
}; };
void UpdateCount ()
{
count.Text = $"{input.Value.Length} chars";
}
void AddItem () void AddItem ()
{ {
if (string.IsNullOrWhiteSpace (input.Value)) if (string.IsNullOrWhiteSpace (input.Value))
@ -71,6 +76,7 @@ namespace Samples
}; };
items.InsertBefore (item, items.FirstChild); items.InsertBefore (item, items.FirstChild);
input.Value = ""; input.Value = "";
UpdateCount ();
} }
addbtn.Click += (s, e) => { addbtn.Click += (s, e) => {
AddItem (); AddItem ();
@ -78,6 +84,9 @@ namespace Samples
inputForm.Submit += (s, e) => { inputForm.Submit += (s, e) => {
AddItem (); AddItem ();
}; };
input.KeyUp += (s, e) => {
UpdateCount ();
};
clearbtn.Click += (s, e) => { clearbtn.Click += (s, e) => {
var toremove = new List<Node> (); var toremove = new List<Node> ();
foreach (Item i in items.Children) { foreach (Item i in items.Children) {
@ -92,6 +101,7 @@ namespace Samples
app.AppendChild (subtitle); app.AppendChild (subtitle);
inputForm.AppendChild (input); inputForm.AppendChild (input);
inputForm.AppendChild (addbtn); inputForm.AppendChild (addbtn);
inputForm.AppendChild (count);
app.AppendChild (inputForm); app.AppendChild (inputForm);
app.AppendChild (items); app.AppendChild (items);
app.AppendChild (clearbtn); app.AppendChild (clearbtn);