I'm working on a chat app in React that is bilingual ( Persian-English) .for the text input, I want it to auto-change direction by the language that the user inputs. The neatest solution that I have seen is using the dir=auto attribute but the problem I have is that I want it to set initial direction according to the language that the app is set. For example, when my app is set to Persian, I want it to be right-aligned ( both cursor and placeholder text) but when using dir=auto it is initially set to left alignment.
I could eventually find a solution for the placeholder but the cursor is still on the left side.
What solution do you suggest?
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
In our mobile website, we use column style to show the article, user can swipe left or right to read the content.
For some reason, we have to identify the start point and end point of given page and insert a span to that particular position for late use.
As the following image shows, the red arrows point at where we want to insert the span.
The position is different on each devices, so we have to calculate it when user load the page.
We have done some researches but found nothing.
We totally have no clues about how to do it.
Please help us, Thank you very much.
I'm implementing kind of a rich text editor based on HTML5 contenteditable features and now stuck on the following obstacle. Say we have several blocks with contenteditable attribute set to true. Whenever user edits text, it should detect the overflow somehow and move the rest of text to the next block (links are stored in the model). And if the actually changed text is moved, the focus and cursor should be moved too.
How this could be possibly achieved? The only idea I have now that partially solves the issue (at least rendering) is to render the complete piece of text in a separate hidden area and then use linked fields dimensions to detect pieces of text to be shown in each area.
The solution is built on top of Backbone + Marionette + Lodash + jQuery.
This one's a challenge:
Suppose you have two text inputs, as in this fiddle. When the user "scrolls" inside of one (e.g. by moving the cursor to the far right or left), I'd like to "scroll" the other so that it stays in sync. Can this be done, at least in modern browsers?
I would change the text that isn't being input to an IFrame. If both need to be inputs, then dynamically switch your element from iframe to input when it is focused on/away from.
In the input box, you can find where the caret is by using the selection properties; then the IFrame can then be scrolled using scrollTo.
I'm afraid I don't have a complete solution for finding out exactly the scroll state of the input box.
I am trying to create a javascript code editor just for learning and I am doing a great job so far. The only thing is that I wanna place the autocomplete box in a position relative to the text cursor in textarea. So how can I determine the cursor position relative to the upper left corner of the window ?
Something else please, how can i capture the tab & enter keys press in a textarea ?
I am using a semi-transparent textarea (semi to keep the cursor blinking) with underlying div to enable code highlighting later on. Is this the best technique to do that ? Or there is a way to make textarea accept rich text or HTML ?
I suspect that you can do all that without a textarea. Read up on the contentEditable property. Here's a demo. This is how the Google Docs editor is implemented, incidentally. And here's a stackoverflow question dealing with finding the cursor position in a contentEditable div.