73 lines
1.6 KiB
HTML
73 lines
1.6 KiB
HTML
<!doctype html>
|
|
<title>Input cursor test</title>
|
|
<h2>Things to check:</h2>
|
|
<ul>
|
|
<li>
|
|
Typing in the fields below should not move the cursor to the end of the
|
|
input. Especially in Chrome.
|
|
</li>
|
|
<li>All inputs should update with the same value.</li>
|
|
<li>
|
|
Typing in an input should not prevent it from being updated by other
|
|
inputs.
|
|
</li>
|
|
</ul>
|
|
|
|
<div id="test"></div>
|
|
<script src="../mithril.js"></script>
|
|
|
|
<script>
|
|
function test(sel) {
|
|
return m("li", [
|
|
m("p", m("code", "m(" + JSON.stringify(sel) + ")")),
|
|
m.apply(null, arguments)
|
|
])
|
|
}
|
|
|
|
m.module(document.getElementById("test"), {
|
|
controller: function() {
|
|
this.title = m.prop("hello world");
|
|
},
|
|
|
|
view: function (ctrl) {
|
|
return m("body", [
|
|
m("h1", ["Title: ", ctrl.title()]),
|
|
m("ul", [
|
|
test("input[list=data]", {
|
|
onkeyup: m.withAttr("value", ctrl.title),
|
|
value: ctrl.title()
|
|
}),
|
|
|
|
test("datalist#data", [
|
|
m("option", "John"),
|
|
m("option", "Bob"),
|
|
m("option", "Mary")
|
|
]),
|
|
|
|
test("textarea", {
|
|
onkeyup: m.withAttr("value", ctrl.title),
|
|
value: ctrl.title()
|
|
}),
|
|
|
|
m("li", [
|
|
m("p", "untrusted ",
|
|
m("code", "m(\"div[contenteditable]\")")),
|
|
m("div[contenteditable]", {
|
|
style: {border: "1px solid #888"},
|
|
onkeyup: m.withAttr("innerHTML", ctrl.title)
|
|
}, ctrl.title()),
|
|
]),
|
|
|
|
m("li", [
|
|
m("p", "trusted ",
|
|
m("code", "m(\"div[contenteditable]\")")),
|
|
m("div[contenteditable]", {
|
|
style: {border: "1px solid #888"},
|
|
onkeyup: m.withAttr("innerHTML", ctrl.title)
|
|
}, m.trust(ctrl.title())),
|
|
])
|
|
])
|
|
]);
|
|
}
|
|
});
|
|
</script>
|