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
When an <input type="text"> is filled with a long string and lose its focus, we only see the left of the string, but not the end. I would like to reverse this behavior, since in my use case the end of the string is far more important than the start.
With rtl properties, displaying is fine, but I still want to write left to right.
http://jsfiddle.net/9fqjz76h/
My use case includes readonly or disabled properties, so I can't "cheat" with focus and text selection.
Is there any other solution?
If you are not against using jQuery, try this.
$('input').blur(
function(){
$(this).attr('dir','rtl')
}
);
$('input').focus(
function(){
$(this).attr('dir','ltr')
}
);
Fiddle
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I want to use the white-space CSS property in an HTML textarea.
Basically if someone types a bunch of text with line breaks in a textarea, and then submits this data to be stored in MySQL, I want to use the white-space CSS property to display those line breaks in the textarea. But when I try it it's not working and just displays the text all together in one big paragraph, without any breaks or anything. Is there a way to do this?
<form action="includes/changebio.php" method="post" id="form1">
<textarea id="bio" style="width: 440px;
margin-top:3px;
text-align:left;
margin-left:-2px;
height: 120px;
resize: none;
outline:none;
overflow:scroll;
**white-space:pre-line;**
border: #ccc 1px solid;" textarea name="bio" data-id="bio" maxlength="710" placeholder="<?php echo stripslashes($profile['bio']); ?>"></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>
textarea{white-space:pre}
When I've seen this, it's because your textarea is inheriting a white-space:nowrap from something. It can also be complicated by a wrap="no" on the textareas which can be useful sometimes.
The default behavior for a textarea nowrap is pre, so simply setting the css as above at the bottom of your styles will override anywhere that is setting the white-space.
If you inspect your textarea element, you'll most certainly find that somewhere in the hierarchy you're setting the nowrap property somewhere on some type of element that is overriding the default textarea behavior.
Don't.
<textarea> elements already handle whitespace literally. There is no need to try and take things into your own hands.
Things seem to be working ok for me... Tossed this into a codepen just to test it. Newline characters appear fine within the textarea when added directly.
Don't know what's going on. Is PHP stripping newline characters? Are you using double quotes around whatever you are passing in through $profile['bio']?
Here's an answer that might help you: The .val() of a textarea doesn't take new lines into account
The last response, in particular. Based on your code, it doesn't sound like the .replace() method is what you need (but I could be wrong... maybe I'm not understanding what you are doing).
one line of jquery will solve the problem
$('#bio').text('');
or Javascript
document.getElementById("bio").innerText = '';
Textareas are great because of some built in functionality (scrollbars). How can I format <spans> of text inside of the <textarea>?
If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.
It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.
<div id="fake_textarea" contenteditable></div>
The scrollbars can be reproduced with the CSS overflow property.
You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):
<input type="hidden" id="fake_textarea_content" name="foobar">
...
$('#your_form').submit(function()
{
$('#fake_textarea_content').val($('#fake_textarea').html());
});
You Can't style the content of a text area separately, you have to use <div>s, or something similar.
Do you Want Something like this:?
http://jsfiddle.net/mekwall/XNkDx/
$('.editable').each(function(){
this.contentEditable = true;
});
This allows you to edit the content of a div, and it will still look like a textarea,
Bold will now Work.
You cannot use HTML inside TEXTAREA.
Scrolling can be applied to any element by adding overflow: auto and fixed width and/or height.
You can user html editors for web like CKEditor to be able to format the data in text area. Check this http://ckeditor.com/
Another way to submit the "fake" text area is including the following lines inside the form tag
<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>
Dear all, I save formatted text (bold, changed in font, style...etc) in an nvarchar(max) field, its for some Description field, on another stage, I want to be able to edit this description, so in the Editing Page, I read the original inoformation, fill it in the fields and wait for the user to change it and save, this is working for all kinds of normal text fields, and also with normal text displayed in a text area, but when I fill the text area with the styled text, it shows the HTML code and not it result, so for instance, it shows:
<span style="font-weight: bold; text-decoration: line-through;">SM</span><span style="background-color: rgb(51, 102, 255);">ART</span><br>
Instead of a what it should look like, any suggestions on how I can make the textArea (normal asp.net textbox with the mode set to multiline) display the HTML as it should look and not the code??
You can not display HTML result in TextArea/TextBox control. But to display HTML result you have many options.
As Schnalle said, best and the easy way to use an editor. Like tinyMCE or FCKEditor.
In a project I used a div to display and edit HTML content. It allows users to edit, copy, paste, make bold, make italic, .. etc. :
<div runat="server" ID="divContent" contenteditable="true">
Editable Area, set your content here...
</div>
Maybe you can combine textarea and div to do what you want.
you need a wysiwyg-editor like tinyMCE http://tinymce.moxiecode.com/
If you just want it to display the code, use < as <, and > as >.
Eg:
<textarea>
<html>
<body>
</body>
</html>
</textarea>