I have a textarea with transparent text, with an underlying pre that displays the text via js, so it looks like the user is typing dynamic text as they go. It works on the same concept as the background colors on this Regex Tester, except I'm changing text color and background color, so I want transparent text in the textarea.
However, defining the textarea's color as transparent, also makes the blinking cursor transparent, which is disorienting. Is there a way to only change the blinking cursors color or only change the text's color and not affect the blinking cursor?
I have browsed other questions, but they haven't provided sufficient answers.
Note: I am referring to the blinking textarea caret, not the mouse cursor. When you click in a textarea or a text input, a blinking textarea "cursor" or caret pops up. This question is about that, not about the mouse cursor.
The easy solution, but working only if you use a monospaced font (like Courier or Courier New) - don't set textarea's color to transparent, but on keyDown fill it with spaces insead of any other characters:
on keyDown ↓
get the character ↓
put it in the underlaying <pre> tag ↓
put a space in the textarea
You would need to get the caret position to place the space and the character in appropriate place, but there are scripts for that already (this one for example).
I can create a fiddle/plunkr example for you if you want.
The thing is getting harder if the font you are using is not monospaced, but sice you are using a <pre> tag you should be ok with this one (if anyone is curious I can describe the non-trivial, time consuming and definately not-IE-compatible approach for not monospaced fonts I came up with).
EDIT:
Actually you can also get the caret position from the transparent textarea and move a 1px-wide black div to the correct position (for not monospaced fonts). You can also blink it using CSS animations or Javascript.
try the css property caret-color
docs here: w3schools - caret color
textarea {
caret-color:red;
}
<textarea></textarea>
Related
For clarity I am using react and mui
I want to change the style of the caret inside the input element and give it an animation. I can change color using caret-color, and I can give it a default blinking speed using autofocus. The blinking speed is some default value, and even if I assign the caret a blinking animation via keyframes and opacity, the default animation still persists causing overlap in blinking states.
Is there a way to disable the default blinking behaviors, or alternatively alter the blinking speed? Additionally in regards to changing the width of the cursor, would I replace the | symbol with some special character like ▌
I dont really have any example code to give since it's a general question
<input autocomplete/>
<TextField/>
For full control of style, you could keep the input but put it out of the viewport, keep the label in the viewport, and use a div to mirror the input value. Apply style and behaviour to the div.
However, users of any particular device are used to an input looking like an input on that device, and trying to redesign a wheel that has had huge effort put into it is not necessarily productive, also needs testing on a lot of browsers/devices.
Something similar to what you have asked for is at How can I change input blink caret style with easy css, js
I'm trying to build some search engine on my nwjs application and for several reasons, I can't use APIs like Mark.js because it causes dom changes wrapping some HTML tag around the word I want to find. That is why I want to use text selection to represent the highlight but I don't know-how.
Sounds like you want this:
https://github.com/nwutils/find-in-nw
It will also add dom wrappers, but removes them when done.
The only other way I can think of doing what you want would be:
Detect the x,y coordinates of text on the page
Good luck. Text reflows based on layout and browser width. If the text is not wrapped in an element I'm not sure how to get it's coords or size (bounding box/rect)
Create an absolute positioned element above it with a mix-blend-mode: darken
This would work for dark text on a background lighter than your highlight. So like white text on a black background with a yellow highlight. But if it's white text on a black background you'd need mix-blend-mode: lighten. Also, good luck determining the background color and text as those can be stored on basically anywhere in the DOM.
You're better off just using that library, or finding a different way approach or define your problem space.
I am using a textarea to emulate a piece of 9.5x11 Letter sized US paper.
I have a textarea that is appropriately scaled to the 9.5x11 size; however, I want to prevent users from being able to add more text that would overflow the textarea.
The goal is to limit the user to the boundaries of the textarea, and thus preserve the ability to scale the content to Letter sized paper.
I've tried using resize:none, and each option for overflow, but these mainly seem to deal with the pixel size of the textarea, and not the content inside it. How can I use Javascript, CSS, or HTML to keep the user within the boundaries of the textarea?
Here is my situation as you see in the picture. I am working on a markdown editor. A floating command button panel is visible, when mouse over the textarea. The command button panel is absolute positioned at the top right corner of the textarea.
But some times, text in textarea is blocked by the command panel, making selecting the text underneath it impossible.
I'd like to detect a situation when there is a text under the command panel, then apply a class to shift command panel up 50px.
Here is my question: How to detect if there is text in textarea tag under a rect shape div?
Thanks!
AS you can see in the below picture, the command panel hovering over textarea blocks the text. I'd like to detect this situation.
So, one thing that you can do is get the width of the text area. AKA the cols attribute of the textarea.
Once you have the width of the text area, you get the text (textarea value) within the text area and find the length of that text. If the length of the text within the textarea is greater than the number of cols you know that the text will span the length of the textarea.
One very apparent caveat is that lets say you are writing a poem or something and the text never spans the length of a full line, that length will be longer than the number of cols while never actually spanning the full length of the textarea
Another inherent issue is that if you start scrolling in your textarea new text may come underneath the controls.
I don't really think it would be possible to detect whether or not text inside of a textarea is underneath a certain div.
What I would probably suggest doing is just always have the controls div 50px higher than the textarea. Simple solution, that will still look good and won't require any crazy coding on your part, because I can't really picture an easy way (or any way for that matter) to do this.
Hope this helps.
Ok, I've had to do something similar for a resizing textarea in the past. The secret is to have an offscreen input or textarea with variable width. As the text is updated in your visible text field, copy the text over to the off screen element element. The shadow element has to have all of the same styling that affects the visible element (padding, border, width, height, font size, etc) to make sure you get accurate results. Then measure the width of the shadow element on each text change.
Over the last two days I've been working on manipulating inline text that sits between <span> tags.
For something close to the effect I'm looking for, check this out:
http://jsfiddle.net/6uf96/5/
On JSFiddle, in the "Result" box, hover over the yellow "Activate Div". If you're on Chrome, the pink text rolls up as if it is a tape measure retracting, and the green text rolls out as if it is a tape measure being pulled out. That kind of sliding "appearing" and "disappearing" is the effect I'm going for.
To achieve this I'm using CSS transitions between letter spacing values (see "deletion" and "insertion" classes). The pink highlighted text transitions from normal spacing to highly negative spacing (to go from visible to invisible), and the green highlighted text transitions between highly negative spacing to normal spacing (to go from invisible to visible).
The issue is that this method really trips out the browsers. It works ok on Chrome (although it's quite jittery and there is sometimes trouble with the unhighlighted text). It doesn't seem to work on Safaari at all - the pink and green sections just disappear and appear respectively.
I've tried to achieve the effect using <div> tags with "overflow" and JQuery's .animate() (animating between high width and low width divs and hiding the overflow text that spills out of the low width div). This works really well until you have text that breaks the line - it doesn't work at all then, so this method seems to be out of the question (unless someone knows something that I don't).
So, the million dollar question: does anyone know of a plugin or another technique to do this kind of inline text manipulation, even across line breaks?
To get it working in Safari you need to use the prefixed version of transtions. Which means you need to add -webkit-transition to the regular transition.
I updated your jsFiddle accordingly: http://jsfiddle.net/6uf96/7/