An example of command-prompt style actions being triggered when you press a certain key in an input.
Back to overviewThe most common example is, most likely, entering a command and then pressing 'Enter'. This is a common enough scenario it gets its own unique tag.
<span th:text="${onSpaceValue}"></span>
<input type="text" m:enter="sendTextOnEnter(:{this})" />
package sample.getmedusa.showcase.samples.textinputs.keyup;
import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;
import io.getmedusa.medusa.core.session.Session;
import java.util.List;
import static io.getmedusa.medusa.core.attributes.Attribute.$$;
@UIEventPage(path = "/detail/sample/keyup", file = "/pages/sample/keyup.html")
public class KeyUpController {
public List<Attribute> setupAttributes() {
return $$("onEnterValue", " ");
}
public List<Attribute> sendTextOnEnter(String value, Session session) {
return List.of(new Attribute("onEnterValue", value));
}
}
More generically, the same logic can be applied for any other key as well. You can use the m:key attribute to specify the key required to trigger the call.
<span th:text="${onSpaceValue}"></span>
<input type="text" m:key=" " m:keyup="sendTextOnSpace(:{this})" />
package sample.getmedusa.showcase.samples.textinputs.keyup;
import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;
import io.getmedusa.medusa.core.session.Session;
import java.util.List;
import static io.getmedusa.medusa.core.attributes.Attribute.$$;
@UIEventPage(path = "/detail/sample/keyup", file = "/pages/sample/keyup.html")
public class KeyUpController {
public List<Attribute> setupAttributes() {
return $$("onSpaceValue", " ");
}
public List<Attribute> sendTextOnSpace(String value) {
return List.of(new Attribute("onSpaceValue", value.trim()));
}
}