I managed to write an angular directive (I have extracted it to pure jQuery for this post) to auto-adjust the width of a text input.
However, it seems like the width of the input field is not changing fast enough because the contents scroll back and forth.
Type into the input field to see for yourself: Demo on JSFiddle
Here is the code:
var $element = $('#my-input');
// create dummy element to calculate text width in pixels
var dummy = $('<span></span>');
$('body').append(dummy);
dummy.css('visibility', 'hidden');
// apply all relevant text styling from our input element
dummy.css('fontFamily', $element.css('fontFamily'));
dummy.css('fontSize', $element.css('fontSize'));
dummy.css('fontWeight', $element.css('fontWeight'));
dummy.css('letterSpacing', $element.css('letterSpacing'));
var resize = function() {
dummy.html($element.val().replace(/ /g, ' '));
$element.width(dummy.innerWidth() + 1); // it's 1px off for some reason
};
resize();
$element.on('keyup', resize);
How can I prevent this from happening? I've already experimented some with scrolling the input field but to no success. Anybody have an idea?
The keyup that you use is triggered only when the user release its keyboard key, so only after that the character is added on the input field and its content is bigger than its width. It cause the jiggeling you talk about.
You should add the input event to your listener event list. This event, supported only by new browsers, is triggered everytime a character is changed in the input field.
You can check this answer about input field change events to learn more.
Related
I'm working on an admin-panel where the inputs are contenteditable divs. I also have a toolbar (containing some formatting buttons), that shows up if you have any selected text inside the div, and will be removed if not.
The problem is, that when I click to any button in the toolbar, the selection from the document will be removed, so I can't insert for example a tag before and after the text.
Can I prevent this behaviour, or is there any workaround for this?
It's not inevitable that the selection is lost when the user clicks a button. The two ways I know to avoid it are:
Use the mousedown rather than the click event on the button and prevent the event's default action
Make the button unselectable.
See https://stackoverflow.com/a/11787147/96100.
I typically handle such cases by tracing the cursor change position within the editable control. Set up a variable to hold the last position, update it with each position change, then read the variable from your toolbar's event.
I don't work with JS enough to know the specific syntax for this offhand, but it's pretty general stuff for the most part.
I fixed it with saving the range variable into a window variable (global), after mouseup. Then use this to find and replace the elements. And it works!
I use this function to define whether a string is selected or not:
function isTextSelected(input) {
var sel,range,selectedText;
if(window.getSelection) {
sel = window.getSelection();
if(sel.rangeCount) {
range = sel.getRangeAt(0);
selectedText = range.toString();
if(selectedText.length) {
window._selection = range; // <-- This line saved my life! :)
return true;
}
}
}
}
And this is the code of the "B" button:
$('.editor-icon.b').click(function(e){
var element = document.createElement('b');
var selectedText = document.createTextNode(window._selection.toString());
element.appendChild(selectedText);
window._selection.deleteContents();
window._selection.insertNode(element);
window._selection = false;
});
I have a simple textarea and It has a default value. I want to hold this value everytime. User should not remove this value but he can add extra string.
<textarea>This is contstant</textarea>
As you see above. It has a default value. How can I protect this value? But user can add something after default value like below.
<textarea>This is contstant and extra things by user</textarea>
So how can do a partially editable textarea with default value?
You can attach an event handler to the <textarea> that does a simple validation every time it changes. If it tries to change to where your constant is partially destroyed, overwrite the X characters of the string value.
$('#foo').keydown(function () {
if ($(this).val().indexOf("This is constant. ") !== 0) {
var length = "This is constant. ".length;
var current = $(this).val();
var after = current.slice(length);
$(this).val("This is constant. " + after);
}
});
Here is a example on JSFiddle.
I recommend using JQuery for this because <textarea> doesn't actually have a value, or I think even a text attribute that you can check. JQuery just abstracts away <textarea>'s quirks.
I would go this way:
Style the textarea to remove the border.
Put a div on top which contains the constant text.
Wrap both elements in a div to give it a common border.
That way, the constant text will appear as if it was part of the textarea but it's not.
When you submit the form, prepend the static text to the field value.
I'm trying to insert something in a text area (#note_text) from a drop down list (#note_template). User should be able to insert a number of items into the text area in between typing characters using the keyboard. Similar to selecting from a collection of emoticons to be put in the message.
When done in the followign way, the text area can receive items after typing.
function update1() {
$txt = $("#note_text").val() + $("#note_template option:selected").val() ;
$("#note_text").val($txt);
$("#note_template").val("");
}
But when done in the following way, the content of the text area wouldn't update after typing. Only before typing I can insert items from the drop down list.
function noteTempalteSelected() {
$("#note_text").append( $("#note_template option:selected").val() );
$("#note_template").val("");
}
So it seems that the use of append causes the text area to freeze. Could anyone explain why ? Thank you.
Ok I think I know whats going on here. For the append to work properly, the element should have an innerHTML property or html() in jquery. Textarea just like the input has a val() property. So for this to work properly you should try this:
$('#note_template').on('click', 'option:selected', function(e){
var txtArea = $('#note_text');
txtArea.val(txtArea.val() + $(this).val());
$(this).val('');
});
[DEMO HERE][1]
I am struggling with JSFL text fields. I want to put a text field on stage with a static width of 220px. So if the string that is put into the text is longer than that it auto wraps to the next line.
Any suggestions?
doc = fl.getDocumentDom();
doc.addNewText({left:0, top:0, right:220, bottom:200});
doc.setElementProperty("textType", "static");
doc.setElementProperty("width", 220); // fails miserably -- text field is huge
doc.setTextString(value);
// Setting the width after the text is entered scrunches the text -- doesn't wrap
// doc.selection[0].width = 220;
So I took a look at your JSFL issue and through this I have found that I never want to work with Flash text boxes in JSFL again...haha. I was able to create a text box with a width of 220 px on the stage and have it populated with text using the code below. One of the main issues I ran into was that static text boxes don't allow you to adjust the line type property so you create one as dynamic first and set it to multiline, then set it to a static text box, and for some reason that worked.
// Add Text To Stage - Andrew Doll
// 09-13-13
var dom = fl.getDocumentDOM();
if (dom == null)
{
alert('Please open a file.');
}
else
{
// String of text to test with.
var value = 'This is a test string to make sure what I am doing is working correctly.';
// I have no idea why but for some reason Flash will add 2px to the width of the box created so I just used 218 instead of 220.
// Add a text box to the stage.
dom.addNewText({left:0, top:0, right:218, bottom:200});
// Set the size of the text bounding box.
dom.setTextRectangle({left:0, top:0, right:218, bottom:200});
// Static text boxes don't allow you to use lineType so use dynamic then set to static afterwards.
dom.setElementProperty('textType', 'dynamic');
// Allows multiline text.
dom.setElementProperty('lineType ', 'multiline');
// Limits the text box from expanding in size.
dom.setElementProperty('autoExpand ', false);
// Set the text box to static.
dom.setElementProperty('textType', 'static');
// Set the string of text into the text box.
dom.setTextString(value);
}
I hope this helps you out. Let me know how it works out for you.
I am looking for a effect in the text box.
Initially the size of the text box will be small and when type in, the text box should grow bigger. Is there any jquery plugin available for this effect? If not how can this be achieved.?
$("#mytextbox").keyup(function() {
$(this).attr("maxLength", $(this).attr("maxLength") + 1);
$(this).attr("size", $(this).attr("size") + 1);
});
Be aware that if the user presses a function key with the textbox focused, the size will increase regardless. You should instead monitor the textbox for changes in its value:
$("#mytextbox").keyup(function() {
$(this).attr("size", $(this).val().length + 1);
});
Note that the second method will also support copy/pasting into the input field, whereas the first one will not, although you'll have to make sure the user has enough room to copy something in (right now, the size is set to +1 of the current value, meaning the user can only input one character at a time before the size is increased).
var $text = $('myselector')
$text.keyup(function() {
$(this).attr({size : $(this).val().length});
});
This takes the size directly from the string length of whatever is input in the textbox.
have a look at this jquery plugin:
http://www.unwrongest.com/projects/elastic/