RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 08:08:12 +00:00
Code Issues Activity Actions

LibWeb: Hide input placeholder when input already has a value

Browse source
This commit is contained in:
Bastiaan van der Plaat 2023-12-10 19:33:37 +01:00 • committed by Andreas Kling
parent df57d7ca68
commit d025d207d9
6 changed files with 50 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Tests/LibWeb/Layout/expected/input-element-with-display-inline.txt
View file

@ -5,9 +5,6 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 200x25.84375] frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 200x25.84375]
BlockContainer <input> at (11,11) content-size 200x25.84375 inline-block [BFC] children: not-inline BlockContainer <input> at (11,11) content-size 200x25.84375 inline-block [BFC] children: not-inline
Box <div> at (13,12) content-size 196x23.84375 flex-container(row) [FFC] children: not-inline Box <div> at (13,12) content-size 196x23.84375 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,23.921875) content-size 0x0 flex-item [BFC] children: inline
InlineNode <div>
TextNode <#text>
BlockContainer <div> at (14,13) content-size 194x21.84375 flex-item [BFC] children: inline BlockContainer <div> at (14,13) content-size 194x21.84375 flex-item [BFC] children: inline
TextNode <#text> TextNode <#text>
@ -16,6 +13,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x29.84375] PaintableWithLines (BlockContainer<BODY>) [9,9 782x29.84375]
PaintableWithLines (BlockContainer<INPUT>) [10,10 202x27.84375] PaintableWithLines (BlockContainer<INPUT>) [10,10 202x27.84375]
PaintableBox (Box<DIV>) [11,11 200x25.84375] PaintableBox (Box<DIV>) [11,11 200x25.84375]
PaintableWithLines (BlockContainer(anonymous)) [13,23.921875 0x0]
InlinePaintable (InlineNode<DIV>)
PaintableWithLines (BlockContainer<DIV>) [13,12 196x23.84375] PaintableWithLines (BlockContainer<DIV>) [13,12 196x23.84375]

11
Tests/LibWeb/Ref/input-placeholder.html Normal file
View file

@ -0,0 +1,11 @@
<link rel="match" href="reference/input-placeholder-ref.html" />
<style>
* {
margin: 0;
font: 16px 'SerenitySans';
}
body {
background-color: white;
}
</style>
<input value="PASS" placeholder="FAIL">

BIN
Tests/LibWeb/Ref/reference/images/input-placeholder-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

15
Tests/LibWeb/Ref/reference/input-placeholder-ref.html Normal file
View file

@ -0,0 +1,15 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<!-- To rebase:
1. Open input-placeholder.html in Ladybird
2. Resize the window just above the width of the canvas
3. Right click > "Take Full Screenshot"
4. Update the image below:
-->
<img src="./images/input-placeholder-ref.png">

39
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -500,6 +500,23 @@ static bool is_allowed_to_have_placeholder(HTML::HTMLInputElement::TypeAttribute
} }
} }
// https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder
String HTMLInputElement::placeholder() const
{
auto maybe_placeholder = get_attribute(HTML::AttributeNames::placeholder);
if (!maybe_placeholder.has_value())
return String {};
auto placeholder = *maybe_placeholder;
// The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
StringBuilder builder;
for (auto c : placeholder.bytes_as_string_view()) {
if (c != '\r' && c != '\n')
builder.append(c);
}
return MUST(builder.to_string());
}
// https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder // https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder
Optional<DeprecatedString> HTMLInputElement::placeholder_value() const Optional<DeprecatedString> HTMLInputElement::placeholder_value() const
{ {
@ -509,19 +526,7 @@ Optional<DeprecatedString> HTMLInputElement::placeholder_value() const
return {}; return {};
if (!has_attribute(HTML::AttributeNames::placeholder)) if (!has_attribute(HTML::AttributeNames::placeholder))
return {}; return {};
return placeholder().to_deprecated_string();
auto placeholder = deprecated_attribute(HTML::AttributeNames::placeholder);
if (placeholder.contains('\r') || placeholder.contains('\n')) {
StringBuilder builder;
for (auto ch : placeholder) {
if (ch != '\r' && ch != '\n')
builder.append(ch);
}
placeholder = builder.to_deprecated_string();
}
return placeholder;
} }
void HTMLInputElement::create_shadow_tree_if_needed() void HTMLInputElement::create_shadow_tree_if_needed()
@ -573,8 +578,8 @@ void HTMLInputElement::create_text_input_shadow_tree()
)~~~"_string)); )~~~"_string));
MUST(element->append_child(*m_placeholder_element)); MUST(element->append_child(*m_placeholder_element));
m_placeholder_text_node = heap().allocate<DOM::Text>(realm(), document(), initial_value); m_placeholder_text_node = heap().allocate<DOM::Text>(realm(), document(), String {});
m_placeholder_text_node->set_data(attribute(HTML::AttributeNames::placeholder).value_or(String {})); m_placeholder_text_node->set_data(placeholder());
m_placeholder_text_node->set_editable_text_node_owner(Badge<HTMLInputElement> {}, *this); m_placeholder_text_node->set_editable_text_node_owner(Badge<HTMLInputElement> {}, *this);
MUST(m_placeholder_element->append_child(*m_placeholder_text_node)); MUST(m_placeholder_element->append_child(*m_placeholder_text_node));
@ -597,6 +602,8 @@ void HTMLInputElement::create_text_input_shadow_tree()
m_text_node->set_is_password_input({}, true); m_text_node->set_is_password_input({}, true);
MUST(m_inner_text_element->append_child(*m_text_node)); MUST(m_inner_text_element->append_child(*m_text_node));
update_placeholder_visibility();
if (type_state() == TypeAttributeState::Number) { if (type_state() == TypeAttributeState::Number) {
// Up button // Up button
auto up_button = MUST(DOM::create_element(document(), HTML::TagNames::button, Namespace::HTML)); auto up_button = MUST(DOM::create_element(document(), HTML::TagNames::button, Namespace::HTML));
@ -718,7 +725,7 @@ void HTMLInputElement::attribute_changed(FlyString const& name, Optional<String>
} }
} else if (name == HTML::AttributeNames::placeholder) { } else if (name == HTML::AttributeNames::placeholder) {
if (m_placeholder_text_node) if (m_placeholder_text_node)
m_placeholder_text_node->set_data(value.value_or(String {})); m_placeholder_text_node->set_data(placeholder());
} else if (name == HTML::AttributeNames::readonly) { } else if (name == HTML::AttributeNames::readonly) {
handle_readonly_attribute(value); handle_readonly_attribute(value);
} }

1
Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
View file

@ -71,6 +71,7 @@ public:
void commit_pending_changes(); void commit_pending_changes();
String placeholder() const;
Optional<DeprecatedString> placeholder_value() const; Optional<DeprecatedString> placeholder_value() const;
bool checked() const { return m_checked; } bool checked() const { return m_checked; }