For my website, i need to provide arabic support. Part of it is to provide input textboxes where when user types in, the new characters have to be appended to the left and the text has to be right aligned.
setting the css property to
text-align:right
didn't work, as i could not get the cursor to come to the left and add letters there. So I removed that property and added
direction:RTL
Here, the cursor came to the left and text was right aligned. but the newly added characters were not getting appended to the left. Instead they were getting appended to the right end only.
How do I fix this? please help..
For example, see the google arabic page search box. I need the exact behavior, although not with those fancy keyboard icon etc., http://www.google.com/webhp?hl=ar
You can use the dir="rtl" on the input. It is supported.
<input dir="rtl" id="foo"/>
Here's what I can think of:
Use direction:RTL for the RIGHT alignment
Write a JavaScript handler attached to the event: "onkeyup", which performs the shifting of the entered character to the LEFT (doing some text processing).
function rtl(element)
{
if(element.setSelectionRange){
element.setSelectionRange(0,0);
}
}
<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>
This code will do.
Simply use this CSS, this will change your text field and cursor position from right to left.
input, textarea {
unicode-bidi:bidi-override;
direction: RTL;
}
Use only direction:RTL and when switched to a proper keyboard (e.g. Arabic) in the system settings, the newly added characters will correctly be appended to the left.
A feature specific to Angular Material, in addition to direction: rtl, is :
.mat-form-field {
text-align: start!important;
}
This will work for both RLT & LTR
A better, more user-friendly way to do this is to set the dir attribute to auto.
<input dir="auto" id="foo"/>
This way if a user enters English text it will be left-aligned and if he enters Arabic text it will be right-aligned automatically
See here for more information on the dir attribute
Use on the input in css.
input {
unicode-bidi:bidi-override;
direction: RTL;
}
It works for Chrome browser.
Use a div element and make it editable.
<div contenteditable="true">
</div>
Related
This seems like a simple thing that must be on the internet somewhere and I'm just searching for it wrong. I have a textarea HTML element which I'd like to cause it to grow (i.e. increase number of rows) whenever the input text wraps around. So the number of rows should always match the number of rows of input text (i.e. no scrolling necessary to view all the text). What I have so far looks something like this:
<textarea name="my-textarea" class="input" rows="1" style="width: 100%; resize: none;"></textarea>
I have jQuery available to me if necessary, so I don't need this to be a purely HTML/CSS solution. Is there a particular event that I can listen on that will help me identify when to add a row?
Auto-resize textarea to fit the content would need some JS and there's a small plugin for exactly that, called jQuery Auto Resize.
You can then call the plugin like:
$('textarea').autoResize();
I have multiple spans with content editable property set to true, like this:
<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>
https://jsfiddle.net/du7g39cz/
Problem is that when I am using arrow keys to navigate around span element, I can not reach end of individual span as blur event gets called when caret reaches last symbol.
I can reproduce this behavior on all browsers apart MS Edge.
I must note that I wouldn't like to keep only one content editable parent, as this would easily let user to delete whole paragraph, intention is to let user edit only one word at a time.
It seems like a browser bug. It is only happening in Firefox for me, however, adding any amount of padding to the spans seems to correct the issue:
span[contentEditable] { padding: 1px; }
https://jsfiddle.net/jimbo2150/du7g39cz/2/
I need to create input with dots showing amount of characters required, and to hide one after other when characters provided:
What is the best way to do this?
I haven't come up with anything smart but drawing circles with position: absolute and add/remove them with js (on keydown or change). But that could fail, because of difference of character width (for ex. i and W)
Because #Santi proposed you the solution with jQuery, I've made a jsFiddle with usage of angular.
<div ng-controller="MyCtrl">
<span class="mask">•••••</span>
<span class="hider">{{val}}</span>
<input type="text" class="code" ng-model="val" maxlength="5" />
</div>
So I've created input which has no border and outline.
Below it on the bottom there is a span mask which has dots that you want. And above mask there is a hider where angular writes value from input so the background rise with the content and hide dots in mask span.
If you use angular in your project you could probably change my jsFiddle to directive.
Additionally IMHO it could be easly changed to jQuery option or even to pure javascript;
PS. Please be respectful for me, because I'm not very best in css.
If you set the font-family of your input field to a monospace font, for example Courier, every character will be the same size. Then you can size your dots based on the ch unit. 1ch is the width of the 0 character (and thus every character in a monospace font).
If you don't want to draw circles, you might be able to use JavaScript to swap out bullets (•) each time a new character is input.
I think your easiest and cleanest method might be implementing something like MasekdInput. Check out the Demo section towards the bottom.
It's a JQuery plugin that puts placeholders into your inputs, and allows you to specify the placeholder character. By default it's _, but you could easily change it to be • by doing the following...
$("#myTextField").mask("*****",{placeholder:"•"});
I have html textarea dynamically it's content changing line by line. I want to add some styles to the updated or modified line content. Is there any windows selection, like properties, to do it??
What I want is make user feel, that the change has happen. Or any other way to achieve it?
There is no simple way to achieve it just by CSS with textarea, but the problem is solvable for sure :)
you can replace textarea with <div contenteditable><p></p></div>
you can set textarea CSS: background: transparent and manipulate some element below the textarea
you can modify this jQuery plugin: https://github.com/cotenoni/jquery-linedtextarea to manipulate specific lines (some CSS work required, cause by default you can manipulate just left column)
you can set custom background for textarea and move it up and down to specific line by background-position: 0 X
Like the title reads, I want to change the character of a caret. Maybe make it a letter or something?
Thanks.
You can do something near this, but its very dificult.
In you textfield bind a event to keydown, for example.
Each char typed, you slide a floating <img> above textarea.
If user click in textarea, update position getting X and Y from onclick.
Obs: the font must be monospaced. Ex: if every font have 20px and user press backspace, you slide this gif to the left 20px.
EDIT
I just made a hello world, in jsfiddle.
Of course, it's an example, but test typing and use backspace and enter to see caret go back and foward.
In this example there are a lot of bugs to fix, like:
Use of <backspace> that cleans all line
Use of arrows that in overflow textarea margins
Use of mouse must update caret position...
That's not possible in HTML/JavaScript.