mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 16:22:43 +00:00
4a30446999
This adds support for parsing the ::placeholder pseudo-element and injecting an anonymous layout node with that element when the input element's data is empty.
92 lines
2.8 KiB
HTML
92 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
#placeholder1, #placeholder2 {
|
|
color: red;
|
|
width: 250px;
|
|
}
|
|
|
|
#placeholder1::placeholder {
|
|
color: green;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p>
|
|
<input type="hidden" id="hidden" value="hidden" /><br />
|
|
<input type="text" id="text" value="text" /><br />
|
|
<input type="text" id="placeholder1" placeholder="This placeholder should be green" /><br />
|
|
<input type="text" id="placeholder2" placeholder="This placeholder should be grey" /><br />
|
|
<input type="search" id="search" value="search" /><br />
|
|
<input type="tel" id="tel" value="tel" /><br />
|
|
<input type="url" id="url" value="url" /><br />
|
|
<input type="email" id="email" value="email" /><br />
|
|
<input type="password" id="password" value="password" /><br />
|
|
<input type="date" id="date" value="date" /><br />
|
|
<input type="month" id="month" value="month" /><br />
|
|
<input type="week" id="week" value="week" /><br />
|
|
<input type="time" id="time" value="time" /><br />
|
|
<input type="datetime-local" id="datetime-local" value="datetime-local" /><br />
|
|
<input type="number" id="number" value="number" /><br />
|
|
<input type="range" id="range" value="range" /><br />
|
|
<input type="color" id="color" value="color" /><br />
|
|
<input type="checkbox" id="checkbox" value="checkbox" /><br />
|
|
<input type="radio" id="radio" value="radio" /><br />
|
|
<input type="file" id="file" value="file" /><br />
|
|
<input type="submit" id="submit" value="submit" /><br />
|
|
<input type="image" id="image" value="image" /><br />
|
|
<input type="reset" id="reset" value="reset" /><br />
|
|
<input type="button" id="button" value="button" /><br />
|
|
|
|
<input type="invalid" id="invalid" value="invalid" /><br />
|
|
</p>
|
|
|
|
<script>
|
|
var ids = [
|
|
"hidden",
|
|
"text",
|
|
"placeholder1",
|
|
"placeholder2",
|
|
"search",
|
|
"tel",
|
|
"url",
|
|
"email",
|
|
"password",
|
|
"date",
|
|
"month",
|
|
"week",
|
|
"time",
|
|
"datetime-local",
|
|
"number",
|
|
"range",
|
|
"color",
|
|
"checkbox",
|
|
"radio",
|
|
"file",
|
|
"submit",
|
|
"image",
|
|
"reset",
|
|
"button",
|
|
"invalid",
|
|
];
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
for (var i = 0; i < ids.length; i++) {
|
|
var id = ids[i];
|
|
var e = document.getElementById(id);
|
|
console.log("id=", id, "type=", e.type);
|
|
}
|
|
|
|
var e = document.getElementById("invalid");
|
|
e.type = "invalid2"
|
|
console.log("after change type=", e.type);
|
|
|
|
e.type = "number"
|
|
console.log("after change 2 type=", e.type);
|
|
e.value = "123abc456"
|
|
console.log("after value change value=", e.value);
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|