How do you apply placeholder pseudo elements in the jquery selector?
91 views
Skip to first unread message
Burt Paulie
Jan 18, 2022, 10:29:26 AM1/18/22
to Google Apps Script Community
I'm trying to assign a font color from an array value to the placeholder pseudo element inside a textarea. Is anyone familiar with the finer points of syntax in this instance? The selector doesn't seem to accept the bind operator after the class name, but I know I'm missing something. Any suggestions would be welcome...
Burt Paulie
Jan 18, 2022, 7:23:09 PM1/18/22
to Google Apps Script Community
The following syntax is non-functional, but should be where the solution can be successfully applied (at least partially). Does anyone have suggestions to make it functional?
$(".RTL-textarea").attr("placeholder").css({"color": backgroundColors[buttonIndex[reset]]});
Clark Lind
Jan 19, 2022, 11:23:43 AM1/19/22
to Google Apps Script Community
From what I've been able to look at in the last couple hours (interesting topic!), I think you will have to use some implementation of css variables (for the colors), and maybe adding/removing css classes (or a class based on the css variable).
You can set and get the text of the textArea.placeholder, but it doesn't look like you can directly change the color. For simplicity, I would probably just have 5 css classes (one for each color), and just remove placeholderClass1 and add placeholderClass2, etc. That would be the easiest to implement, then could be refactored to use css variables, etc.
Some references:
https://css-tricks.com/almanac/selectors/p/placeholder/
**https://www.geeksforgeeks.org/how-to-change-the-placeholder-text-using-jquery/
**even this post only refers to changing the content and refers to css for the style.
You can set and get the text of the textArea.placeholder, but it doesn't look like you can directly change the color. For simplicity, I would probably just have 5 css classes (one for each color), and just remove placeholderClass1 and add placeholderClass2, etc. That would be the easiest to implement, then could be refactored to use css variables, etc.
Some references:
https://css-tricks.com/almanac/selectors/p/placeholder/
**https://www.geeksforgeeks.org/how-to-change-the-placeholder-text-using-jquery/
**even this post only refers to changing the content and refers to css for the style.
Burt Paulie
Jan 19, 2022, 5:47:42 PM1/19/22
to Google Apps Script Community
Thanks for the suggestion. Even as a beginner, I sat there and tried dozens of little variations on syntax to try and get the placeholder color to change, but nothing worked. I might try posting at StackOverflow again in a more detailed fashion, but I think you might be right. I could probably save myself the trouble by skipping the placeholder all together. The whole thing is only really a student exercise at present (nothing monumental) so perhaps as learning the lesson is: The jquery selector cannot change a placeholder's font color as a function of a click event looping through an array. C'est la vie. Thanks again. Stay safe and be well. Cheers for beers...
Clark Lind
Jan 21, 2022, 11:08:07 PM1/21/22
to google-apps-sc...@googlegroups.com
I was able to play around and get it working in a general sense. I think you can see what I'm doing easy enough. Instead of setting the placeholder color as a specific color value, you set it to a custom property (variable). Then you can use JS to manipulate the custom property.
Example html:
Example html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text-area {
--color: blue;
}
#text-area::placeholder {
color: var(--color);
}
</style>
</head>
<body>
<textarea name="textArea" id="text-area" placeholder="My Text"></textarea><br>
<button onclick="btnHandler()">Click Me</button>
<script>
function btnHandler() {
var ta = document.querySelector("#text-area");
ta.style.setProperty('--color', "red")
}
</script>
</body>
</html>
--
You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/Nuxkt0yesuY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/55b727a3-57d9-44bc-8a2b-465fc8c09683n%40googlegroups.com.
Burt Paulie
Jan 22, 2022, 1:39:20 PM1/22/22
to google-apps-sc...@googlegroups.com
That's awesome my friend!! Thank you for proposing a feasible solution. I'll let you know when I get it integrated. I'm just getting this now and focused elsewhere in the project, but I should get to it by Monday. It shouldn't take long. Thanks once again. Good job you...
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAHgJr-34fZrGFq1cF15TwT2ZcSHJXFsVvf%2B8zMd%2BRRNwQqhn%2Bw%40mail.gmail.com.
Burt Paulie
Jan 22, 2022, 9:08:12 PM1/22/22
to google-apps-sc...@googlegroups.com
Thanks again for responding. I have to say that personally, I'm having a very DUDE-like experience with this: Dopaminic Utility Distributional Ethic (true & false negatives). Reading what you wrote, the syntax does not "click" with my intuitive understanding of the rules of javascript and jquery. I'd expect to need a css class ( .class {property:;} ) for defining the placeholder pseudo element ( .class::placeholder {:;} ). Those are the rules published for the placeholder implementation in general. Using the id tag for a class-based implementation is then non-functional (no el worko). Wanting to work on the backend myself, I'm interested in learning why the implementations that should solve the problem are not capable of doing so. The name "pseudo element" seems like a clue to the skewed nature of the use case, because in fact, directly above the line where I've attempted to apply an array-based variable implementation ("color", backgroundColors[buttonIndex[reset]]) the same array variable syntax works for the color of the text areas themselves (as opposed to the placeholder text color instance that fails to work below it)...
Whatever the case is, someone will have to show me themselves if it works somehow, because I've tried enough variations to make the feature worth less than the effort to implement it. Thanks for the negative test double though. Perhaps one day we'll all meet in the sequel. Cheers for beers...
Clark Lind
Jan 22, 2022, 10:05:42 PM1/22/22
to Google Apps Script Community
I could have just as easily used a class:
.textArea::placeholder {
color: var(--color);
}
<textarea name="textArea" id="text-area" class="textArea" placeholder="My Text"></textarea>
Now that I know the placeholder text can in fact be hacked, I'll see if I can put it in your code.
0 new messages