I'm struggling with the following problem. I have input text element. I want a user to enter something there and then his value appears as a normal text (the input should disappear).
I searched for a few solutions but nothing worked for me. What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?):
$('input.modified').on('input', function(){
(this).append('<p>some</p>');
});
OR
$("input.modified").bind("propertychange change keyup paste input", function(){
$(this).append("<p>dgdgd</p>");
});
OR
$("input.modified").change(function(){
$(this).css("visibility","hidden");
}); //end change function
How to make functions like .on() or .change() work with my code?
thanks for all the answer, but I can't move your examples to my code :(
Please verify this fiddle what I'm missing:
[http://jsfiddle.net/w6242/][1]
Check this DEMO
HTML:
<input class="modified" type="text"/>
<p></p>
JS:
$("input.modified").change(function(){
$('p').html($(this).val());
$(this).css("visibility","hidden");
});
check this
Fiddle
$("#in").focusout(function(e){
$("span").html(($("#in").val()));
$(this).hide();
});
Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/
HTML
<div id="wrapper">
<input type="text" id="writer" />
send
</div>
JQuery
$("#submit").click(function(e){
var txt = $("#writer").val();
$("#writer").fadeOut(400);
$("#submit").fadeOut(400, function(){
$("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
});
e.preventDefault();
});
If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element
At its simplest, assuming you really want to replace the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var p = $('<p />', {
text : this.value
});
$(this).replaceWith(p);
}
});
JS Fiddle demo.
Or, to insert an adjacent element and simply hide the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var span = $('<span />', {
text : this.value
});
$(this).hide().after(span);
}
});
JS Fiddle demo.
The above jQuery works with the following demonstrative HTML:
<input id="demo" type="text" />
References:
after().
hide().
on().
replaceWith().
Related
Hello I would like the text inside an input element to highlight upon initial click. However my function does not seem to be working. I have researched the issue and seen that there are some issues with jquery 1.7 and below. I have adjusted it to account for this any it still does not work.
Any help would be great. Thanks!
HTML
<input type="text" value="hello"/>
JS
$scope.highlightText = function() {
$("input[type='text']").on("click", function() {
$(this).select();
});
https://plnkr.co/edit/b7TYAFQNkhjE6lpRSWTR?p=preview
You need to actually call your method at the end of controller, otherwise the event is not bound.
https://plnkr.co/edit/a0BlekB8qTGOmWS8asIx?p=preview
... other code ...
$scope.highlightText = function () {
$("input[type='text']").on("click", function () {
$(this).select();
var test = $(this).parent();
console.log(test);
});
$("textarea").on("click", function () {
$(this).select();
});
};
$scope.highlightText();
};
To select the text inside an input you would simply call this.select() from onclick like shown below
<input type="text" onclick="this.select()" value="hello"/>
I am working in this fiddle http://jsfiddle.net/vVsAn/4821/ I want to make the button text change on click. I have tried different things but non seem to work for me. Any help will be appreciated. below is my html code <div id='content'>Category Contents</div>
<input type='button' id='hideshow' value='Show Categories'>
is there any way i can add some transitional effect to it? i.e making the content show/hide "vertically" from top-bottom & bottom-top because by default, it is moving from left-right & right to left
Your main problem is that <input>s have a value, but you're trying to use .text() on it. Your first step is to change that to .val().
Next, you're using a kinda old version of jQuery, try something more recent, and instead of .live() (which is deprecated), use .on().
Here's a working demo. (Note: I did change the jQuery version to 2.2.1)
you can do something like this...
http://jsfiddle.net/vVsAn/4822/
$(document).ready(function() {
var count = 0;
$('#hideshow').live('click', function(event) {
$('#content').toggle('show');
count++;
if(count % 2)
{
$(this).attr('value', 'Show Categories');
}
else
{
$(this).attr('value', 'Hide Categories');
}
});
});
You have a few issues
You are using an input which has a value you can get with .val() not a text property
You are checking for "Show Answer" but your button acutally says "Show Category"
You should use a newer version of jQuery and .on() instead of .live() if at all possible
$(document).ready(function() {
$('#hideshow').live('click', function(event) {
$this=$(this);
$('#content').toggle();
if ($.trim($this.val()) === 'Show Answer') {
$this.val('Hide Answer');
} else {
$this.val('Show Answer');
}
return false;
});
});
#content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id='content'>Category Contents</div>
<input type='button' id='hideshow' value='Show Answer'>
There are two issues in your code.
You should use .val() function instead of .text()
Your button value is Show Categories not Show Answer
$( document ).ready( function(){
$('#hideshow').on('click', function(event) {
$('#content').toggle('show');
if ($.trim($(this).val()) === 'Show Categories') {
$(this).val('Hide Answer');
} else {
$(this).val('Show Answer');
}
return false;
});
});
Note: .live()is Deprecated as of Jquery Ver. 1.7. So use .on() instead
Currently I have the following code for autosizing my textarea:
$('textarea').bind('input propertychange', function() {
$(this).height(50).height(Math.min(370, this.scrollHeight));
});
This works fine while I am in the textarea and change the text by pressing some keys.
What I need is a possibility to do the same when setting the text of the area by JavaScript and while the textarea is not focused. Only executing the same code in the callback (ofcourse with right scope) doesn't works - height gets zero.
after executing your callback function fire the propertychange function
$('textarea').trigger('propertychange');
with a change and a trigger
$("#i").on('change', function(){
this.style.color = 'red';
});
function f(){
$('#i').trigger('change');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i" value="hello" /><br>
<button onclick="f()">Run</button>
my jquery solution is :
$(document).ready(function(){
$("textarea").each(function(){
$(this).height(($(this)[0].scrollHeight) + "px");
});
$("textarea").keypress(function(){
$(this).height(($(this)[0].scrollHeight) + "px");
});
})
JSFiddle
You may try to trigger the event
$('textarea').on('input propertychange', function() {
$(this).height(50).height(Math.min(370, this.scrollHeight));
});
$('textarea').trigger('propertychange');
//If you change textarea content with html() or append you could try something like that
$('textarea').html(somecontent);
$('textarea').height($('textarea').scrollHeight);
I want to add multiple input values in an input field with jQuery. So that everytime I hit the button, a new value is added in the same field along with the old value.
I am trying following code, but it does not add the value, it simply overwrites the previous value.
HTML:
<div class="wrap">
<button>Add value</button>
<input name="myinput[]" value="" />
</div>
jQuery:
$("button").click(function(e) {
e.preventDefault();
$(this).parent().find('input[name=myinput\\[\\]]').val("value+");
});
Demo:
http://jsfiddle.net/D97bV/
You add strings together with +
$("button").on('click', function(e) {
e.preventDefault();
var elem = $(this).parent().find('input[name=myinput\\[\\]]');
elem.val( elem.val() + 'add this' );
});
FIDDLE
Now you only need something useful to add ?
Try:
$("button").click(function(e) {
e.preventDefault();
var val = $(this).parent().find('input[name=myinput\\[\\]]').val();
$(this).parent().find('input[name=myinput\\[\\]]').val(val+"value+");
});
DEMO FIDDLE
try this:
$("button").click(function(e) {
e.preventDefault();
var myInput = $(this).parent().find('input[name=myinput\\[\\]]');
myInput.val(myInput.val() + "value+");
});
I have <form>s on my page that I want to replace with <button>s. The thing that is causing me difficulty is that I want to use the value of the <form>'s submit input as the html for the button.
<form action="/postcomment/" method="post">
<inputs>
.
.
.
<input type="submit" value="Reply">
</form>
Becomes
<button class="postcomment">Reply</button>
I'm having a hard time wrapping my mind around the chaining here. I need to grab the data values (e.g. "Reply") and then insert them into the button elements in one jQuery operation (or else manage the ordering with something like .index()) and I haven't figure out how to do that yet.
Working example here: http://jsfiddle.net/Mch86/
$(document).ready(function(){
$('form').each(function(){
button = $('<button>' + $('input[type="submit"]', this).val() + '</button>').addClass($(this).attr('action').replace(/\//g, ''));
$(this).replaceWith(button);
});
});
Do something like this:
$('input[type="submit"]').replaceWith(function () {
return $('<button>').text(this.value).addClass('postcomment');
});
jsFiddle Demo
This will replace all of your submit buttons (<input type="submit">) with a <button>, keeping the text on the button.
replaceWith() allows you to use a function as its parameter, which has a reference to the individual submits themselves (this).
Since you said you have multiple forms:
$(function() {
$('form').each(function() {
var str = $(this).find('input[type="submit"]').val();
$(this).replaceWith($('<button/>').addClass("postcomment").text(str));
});
});
You could do:
var label = $('form input:submit').val();
var action = $('form').attr('action').replace(/\//g, '');
var button = $('<button />', { class: action});
button.html(label);
$('form').replaceWith(button)
;
fiddle here: http://jsfiddle.net/be3af/1/