I'm having some issues with text-overflow when trying to print an HTML form.
You can see the issue in action at:
https://www.yandasmusic.com/Articles.asp?ID=304
In any given form field, if the data entered is longer than the width of the field itself, that extra data is cut off, and not printed. How can I avoid this? Is there a way with CSS to achieve a fluid text box that re-sizes based on the content entered?
Thanks,
Alex
if you want a fluid text box that re-sizes based on the content entered try this http://jsfiddle.net/tdhLyazo/
$(document).ready(function(e) {
$("input:text").keyup(
function()
{
var size = $(this).prop('size')
if($(this).val().length > size)
{
$(this).prop('size',size+1)
}
}
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" size="5">
Related
I am working with an HTML input element that is about 10 to 12 characters in size. A user is free to enter any length of string into this field. However, when the user is finished and leaves focus of the textbox, the field shows the latest portion of the string. I want it to show the initial part of the string.
Is this possible?
Sample HTML:
<label><input type="text" name="input" id="text_field" /></label>
One jQuery, dirty&hack-ish, but working solution (not sure about CSS or other possibilities):
$('body').on('blur','#text_field', function() {
new_field = $(this).clone();
$(this).remove();
$('label').append(new_field);
});
DEMO> http://jsfiddle.net/9zswjtqe/4/
Idea is - clone (deep) element on blur, remove it, and attach new element/clone (with desired text position this time). Tested in Firefox, IE, Chrome. Works fine.
How do I make a textarea and input type="text" highlightable and copyable on iOS-devices?
This does not work:
<textarea readonly="readonly">Totally readonly, cannot be copied</textarea>
Neither does:
<textarea disabled="disabled">Totally readonly, cannot be copied</textarea>
EDIT: The text-area is constantly being updated, so a one-off transformation of it won't work.
The content of the textarea can also be HTML.
I have a JSFiddle that I tested this on: http://jsfiddle.net/sebnilsson/jfvWZ/
One solution could be to find all the readonly textareas on the page and render a div with the contents in place of the read only field. I have written some very simple JS to demonstrate this.
Something along the lines of
$('textarea[readonly]').removeAttr('readonly').each(function () {
var $this = $(this);
$this.hide().after('<div data-textarea="' + $this.attr('id')
+ '" class="textarea">' + $this.val() + '</div>');
}).on('textareachange', function () {
var $this = $(this);
$('[data-textarea="' + $this.attr('id') + '"]').html($this.val());
});
You will also need to trigger the event when you update the textarea value.
For example
$('textarea').val('test').trigger('textareachange');
There's a more extensive example here with examples on the styling etc.
http://jsfiddle.net/ssfUx/3/
I've successfull select some text on my iPhone, but needs many try.
<textarea readonly onfocus="this.blur();">Totally readonly, CAN BE copied</textarea>
and the last : http://jsfiddle.net/jfvWZ/6/
<div>
<label>Plain div</label><br />
<div id="plain-div" onFocus="this.blur();">
Plain div
</div>
</div>
Easy to select the text on iPhone
Likewise ran into this issue.
Not sure if the following is a decent, correct or semantic alternative, but it worked for me.
I simply changed the textarea to a div readonly, same styles applied.
The one drawback is that in JavaScript I couldn't target the div with this['myForm']. It doesn't appear to be a child of the form element in DOM.
Instead I had to get the element by id and set it's innerHTML, rather than set the value as with textarea.
It worked on Ipad 1 IOS5 and Iphone 4s IOS7 I am now able to select and copy text to clipboard.
Of course, I can use standard html text box, but I need text area for some reason.
So, is it possible to disable textarea's multiline option?
You can set the size of your textarea using the cols and rows attributes and make it non-resizable in CSS but you can't prevent the user from adding more than one line. Even if the area is just too small, a scrollbar will appear and let them write as many lines as they want.
If you really need to get just one line, I suggest setting the rows attribute to 1 and checking if the input has a single line with Javascript.
In html:
<textarea name="a" cols="5" rows="1" ></textarea>
In CSS:
textarea{
resize: none;
#You can use resize: horizontal if you just want to disable vertical resize
}
Still, I'd suggest using an <input type="text" ... /> Why do you want to avoid it?
You can keep all the text on a single line by settings rows="1" on the <textarea>, like the other answers have suggested, and then applying the following CSS to the text area:
resize: none;
white-space: nowrap;
overflow-x: scroll;
This CSS will prevent the single row from wrapping, while still making the keeping the whole line visible by providing a scroll bar to navigate any text that overflows the visible area.
Yes, it is possible using input event to remove all new-line characters every time a user inputs something.
<textarea oninput="this.value = this.value.replace(/\n/g,'')"></textarea>
Or in a more civilized way:
html
<textarea id="ta"></textarea>
js
document.getElementById('ta').addEventListener('input', function(e){
this.value = this.value.replace(/\n/g,'')
});
Demo on JSFiddle
You can use wrap="off" attribute in textarea to be displayed in a single line.
<textarea wrap="off"></textarea>
Use this pure JS code and it will not allow user to enter multiple lines in textarea
var textArea = document.getElementsByTagName("textarea")[0];//your desired TextArea
textArea.onkeydown = function (e) {
if (e.keyCode == 13) { e.preventDefault(); }
};
NOTE: This method will not work if user copies a multi line text and pastes it in the TextArea.
Use rows=1 to display only 1 line. you can get further more information from this link
You can set the rows attribute to 1.
It is not possible to disable the multiline
The following jQuery snippet forces textarea to be displayed in a single line.
$(document).ready(function(){
$('textarea').each(function(){$(this).attr('rows', 1);});
});
I would like to disable copy event in the TextArea I'm using. To achieve so I added the following code block:
function initTA(){
var tf:IUITextField = body.mx_internal::getTextField();
tf.enabled = false;
}
<mx:TextArea id="body" creationComplete="initTA()" .../>
This is working fine unless the text area has lots of text inside in which case a scroll bar appears. After the scroll bar is being used by the user, the text area stopped blocking the copy event.
By the way, I am using text area for display purposes since I use rich text area format.
Appreciate your help
Thanks!
Uri
A possible solution for this issue is to disable the focus of the text-area component
function initTA(){
var tf:IUITextField = body.mx_internal::getTextField();
tf.enabled = false;
}
<mx:TextArea id="body" creationComplete="initTA()" focusEnabled="false" .../>
This way when the scroll bar is being used (due to lots of text in the text-area), the focus is not returned to the textarea and an indirect manner disables copy.
I trying to validate a form using ajax...I have got it to show either a cross or tick if the box passes valdation. This is done by showing or hiding a div tag, is there an easier way without me having to have a div tag for each cross & tick as this would use about 20 div tags.
Thanks
You could use the CSS :before property to do this:
.tick:before {
content:url(tick.gif);
}
.cross:before {
content:url(cross.gif);
}
(you'll probably have to tweak the CSS a bit to get the image to display in the proper position)
Then in your javascript, just add the class tick or cross to each text box that you want to display an image next to.
Since your validation depends on javascript you could leave the divs out of the html initially and insert them after validating a field. Let's say your source is something like:
<p><input id="email" name="email" type="text" value="" /></p>
Your script could be something like:
var emailField = document.getElementById('email');
if( isValid(emailField) ){
var tick = document.createElement('DIV');
tick.className = 'tick';
emailField.parentNode.appendChild(tick);
}else{
var cross= document.createElement('DIV');
cross.className = 'cross';
emailField.parentNode.appendChild(cross);
}
You add the classes '.tick' and '.cross' to your css and apply background images. Of course, you need some checking if the element was already inserted by a previous validation. This is just a simple example.
This way you don't need the extra divs initially.