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.
Related
I need to set #page{margin-top: dynamic value}. The value should be retrieved from an input element of type text. The element is named P1_MARGIN_TOP. Can this be done?
You will need JavaScript to do this.
Here is a simple snippet to set a CSS variable to the value picked up from the input.
You will need to add code to check that the value and the units the user gives are suitable - I would probably do that with two inputs, one of type number and one a select which has just the options you know will work (e.g. 'in', 'cm'...) to avoid the margin being set to something impossible.
const p1MarginTop = document.querySelector('#P1_MARGIN_TOP');
const button = document.querySelector('button');
// NOTE: you will want to check the value of the input to make sure it makes sense in terms of number and units
button.addEventListener('click', function() {
p1MarginTop.style.setProperty('--margintop', p1MarginTop.value);
alert('--margintop has been set to: ' + p1MarginTop.style.getPropertyValue('--margintop'));
});
#page {
margin-top: var(--margintop);
}
<input id="P1_MARGIN_TOP"><button>Submit</button>
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 little script that changes the colours of the background and the input text based on the length of the input. I would like to make one change but I cannot figure out exactly how. Instead of changing the colour of the entire input text, I want to change only the letter that is changing the colour. So the letters change colour one by one. Below is the line I have and the element it is calling is "ids". I need to say something like "ins[i]" but I do not know how exactly. http://jsbin.com/janukece/1/edit
document.getElementById("ids").style.color= '#' + Math.random().toString(16).slice(2, 8);
I would appreciate any help. Thank you.
Styling is applied to HTML elements - letters aren't HTML elements, so you can't do it in a straight-forward manner as you imagined. Try something like
<span id="letter0">T</span><span id="letter1">E</span><span id="letter2">S</span><span id="letter3">T</span>
then apply styling to the span elements.
You cannot have different multi-coloured letters in a simple input, but you can build this with the HTML5 contenteditable attribute and a span container for every letter.
This example uses jQuery:
// we have a hidden input field and a div container for our coloured letters.
// we change the colours when the hidden input looses focus (blur event)
$("div").prop("contentEditable", true).blur(function(){
// get text from the div
var divText = $(this);
//and split to an array
var chars = divText.split("");
// set text as input field value
$("#hidden").val(divText);
// clear the div container
$(this).html("");
// generate a span for each letter from chars array, colour it and append to the div
$.each(chars, function(){
$("<span>").text(this).css({
color: "#"+(Math.random()*16777215|0).toString(16)
}).appendTo("div");
});
});
This is shown in this jsfiddle http://jsfiddle.net/DerekL/Y8ySy/
I am trying to fill a textarea using javascript, the thing is i found out that textarea doesn't have the value tag, and <textarea ..></textarea> is not an option since i cant use it with javascript.
Edit :
content.document.getElementsByName("cr-work-desc0").innerHTML = "125645";
content.document.getElementsByName("cr-work-urls0").textContent = "this is some sample text";
content.document.getElementsByName("infringing-urls0")[0].setAttribute("value","testing to");
Just set the value of the field via document.getElementById('thefield').value = 'value'.
Try following code
document.getElementById("aa").innerHTML="Blah Blah";
<textarea id="aa"></textarea>
Both innerHTML and value works fine.
You can write anything in place of aaaa
For an input element, the default value is specified by the value attribute and the current value is specified by the value property.
A textarea is different. The default value is specified by the text node that is a child of the element.
i.e.:
<textarea>this is the default value</textarea>
However the current value is still specified by the value property.
document.getElementById('thefield').value = 'value';
… even though there is no value attribute for textarea elements.
You can modify the default value (input.setAttribute("value", "new value") or textarea.innerHTML = "new value") which will:
Modify the displayed value providing it hasn't changed (e.g. by the user typing in it)
Modify the value that the control will be reset to if a reset button is activated
… but usually, you will want to change (and read) the current value which will always be input.value / textarea.value.
I know if I want to change the value of an input on a form according to what a user types into another input using:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
But I'd like to have it so when someone types into the input it updates a Div with the text instead. IE they type into #inputName and this happens:
<div id="personsName"> text appears here as they type</div>
How'd I go about doing that? I doesn't work when I change #inputURL into #personsName :(
The change event is only triggered when leaving the textfield, so use keypress instead if you really want to "update the text on typing into a text field". .val only applies to form elements which actually have a value (e.g. <input> and <textarea> elements). In all other cases, you need the text method for modifying the text .
$("#inputName").keypress(function () {
$("#personName").text(this.value);
});
You can test this code here: http://jsfiddle.net/ntBnA/
You're almost there:
$('#inputName').change(function() {
$('#personsName').text($('#inputName').val());
});
//Cache this bad boy, its being repeatedly used!
var personsName = $('#personsName');
$('#inputName').bind({
keyup: function () {
//This is what you want.
personsName.text($(this).val());
},
change: function () {
//This is what you were doing. See the difference?
$('#inputURL').val($(this).val());
}
});