I want to make text area, where always is pre written text, and that piece of text is located at the end, and it wouldn't be possible to delete. For example, you write answer here, and at the end, right side of cursor, is text "This is end of my answer".
And when you POST it, it displays your written text and "This is end of my answer" at the end.
I know, that I can attach this text easily after posting it, but it must be displayed, and anyone could see it.
I need javascript/jQuery solution.
Thanks!
The text to the right side of the cursor, that moves as you type is really annoying and zero-usable. However, if you want something like that I would suggest putting a background image on the textarea with the text you want. It will be static and none will be able to edit it, and at the same time will always see it.
<input class="myinput" name="myinput" type="text" value="Text_Ends_Here" /></input>
$("input[name=myinput]").click(function()
{
var currentValue = $(this).val();
currentValue = currentValue.replace("Text_Ends_Here", "");
$(this).val(currentValue);
}
);
$("input[name=myinput]").focusout(function()
{
var currentValue = $(this).val();
$(this).val(currentValue + ' Text_Ends_Here');
}
);
http://jsfiddle.net/gXvLB/95/
You can position the required text over textarea using positioning.
Related
JQUERY CODE:
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('#gaga').toggle
})
PUG CODE FOR #gaga element:
p#gaga
| This is `${Value}`
PUG CODE FOR #gaga element:
How can I use three buttons to toggle the #gaga element on when button is active and off when you click outside the specific button and pass a different Value for ${Value} depending on the clicked button. Plus have only one instance of #gaga element running at a time. Meaning if I click the first button then click the second button only the ${Value} will change but the p#gaga element remains only one. I know I have left out the buttons pug code, I don't think it is necessary in solving the problem. But if needed will provide it.
I tried doing it using switch statements but I have failed. Hopefully someone can help.
UPDATE & EDIT as requested by https://stackoverflow.com/users/463319/twisty in the comments.
Here is the code: https://jsfiddle.net/YulePale/mdvnf0qt/4/
After doing some research I have made some progress... but I am still stuck.
I am trying to make it in such a way that when I click anywhere outside the gender buttons the input disappears and when I click another button it changes appropriately. Also instead of an input I want to show and hide the template in the html code.
Also, if you don't mind is .data() use to assign or get a value.
PS: Got this code from this answer : Fixing toggle with two buttons
and modified it a bit, but I am still not able to achieve my desired result.
If you review the API for Menu, they have a nice _closeOnDocumentClick(). You can simply use this in your code in a similar way.
Example: https://jsfiddle.net/Twisty/0x43bf8q/
JavaScript
$(function() {
$("input[type='button']").on('click', toggleOptions)
.first()
.trigger('click');
$(document).on("click", function(e) {
if (emptyOnDocumentClick(e)) {
$('[name=gender]').val("");
}
});
function toggleOptions() {
var $this = $(this),
onClass = 'button-toggle-on';
$this.toggleClass(onClass)
.siblings('input[type=button]')
.removeClass(onClass);
var gender = $this.filter('.' + onClass).data('gender');
$('[name=gender]').val(gender);
}
function emptyOnDocumentClick(event) {
return !$(event.target).closest("input[type='button']").length;
}
});
Hope that helps.
I have this case where I set a current item from a list and I need to use a textarea to edit that element's value.
Because of some constraints I have to use a keyup event but I don't think that's a problem.
Check this fiddle: http://jsfiddle.net/terebentina/Euj2C/
click on first/second buttons - it works, it changes the text in the textarea to the value of each element.
change the text in the textarea to something
click on the first/second buttons again - the textarea is not updated anymore. If you look in console, you can see that it switches between the elements, it's just that the textarea is not updated anymore.
Any suggestions? this is driving me nuts!
I know there is a better way modifying your directive to do this but as a quick fix for now you can try binding your textarea to a ngModel value that is just a copy of the current text in the selected element:
<textarea keyup="" ng-model="keyupText"></textarea>
With this in as your current function:
$scope.current = function(idx) {
$scope.current_element = $scope.elements[idx];
$scope.keyupText = $scope.current_element.value;
console.log('current is', $scope.current_element.value);
}
See this fiddle for an example.
Id like to have a smiple html textarea that when clicked (i guess onFocused) will change its rows="1" property to rows="10." I am pretty sure this can be done with javascript, but im not sure how. Any help will be much appreciated.
<textarea rows="1" onclick="this.rows = '10';"></textarea>
If you want to increase number of rows when textarea is selected by another way for e.g. tabulator you should use onfocus instead of onclick, and if you wanna decrease rows when losing focus, you should use something like this onblur="if(this.value == '') this.rows = '1';" - Because when you once type text into the textarea, and click out of it, the textarea may shrink to 1 row and your text will be not readeable. This prevents this behavior - only shrink when textarea is empty.
i would love to have the textbox value as my radio button value. For example, if I type "1" in the textbox, then the radio button value would change to "1".I hope i could find answers here. By the way, i am using Joomla, and if there are javascripts, pls tell me where to paste it. thanks so much!!!
Never mind, i solved it :D
here it is.
$('#textbox').keyup(function(event){
var value = $(this).val();
$('#radio').val(value);
});
you also need to change the value of your #radio to the id of your textbox e.g
i have one text box in which the text inside the text box should not be deleted and after the text only the cursor has to be placed
Ex:
For the textbox: "http://" should be available and the text which is in quotations cannot be deleted inside the textbox and the cursor should be after the quotations.
Thanks in advance,
Vara Prasad.M
add this to the input field:
onchange="testEdit(this)"
and have a javascript function that does something like this:
function testEdit(field) {
if (field.value.substring(0, 8) != "http://") {
field.value = "http://" + field.value.substring(8);
}
}
However, this is sloppy. The best way is to put the http:// in a label OUTSIDE the text box. If something is in a text box, it should be input. By putting that inside the text box, you will be confusing your users.
Good luck.