Append text to text area with jquery issue - javascript

Im trying to make some buttons append text to a textarea with jquery, and I have it working, but only if I dont type anything into the textarea itself.
Code:
<textarea name="comments" id="comments" rows="20" style="margin-left: 0px; margin-right: 0px; width: 968px;"></textarea>
<div>
<button>+petname</button>
<button>+lastvisit</button>
<button>+nextvisit</button>
</div>
<script>
$( "button" ).click(function() {
var text = $( this ).text();
$('#comments').append(text);
});
</script>
This code is working, but the minute I type something else into that text area, the buttons no longer work??? WHY!!?? I just cant figure it out.
Much thanks.
Jason

Instead of doing append set val using its function argument syntax, do this way:
$('#comments').val(function(_, val){
return val + text;
});
Demo

change
$('#comments').append(text);
to
$('#comments').val( $('#comments').val() + " " + text );

Related

How to change textarea value dynamically?

I got a problem in updating the value within <textarea> tags. The procedure is like this, there is an initial value inside textarea, then the user changes it. If I want to use a js script (implemented by a button) to modify the value further, it does not work at all. However, if we do nothing on the textarea, the button works perfectly. So weird to me. Could anyone shed any light on this? The code is posted below.
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").html("Star wars"); // this line doesn't work after editting the textarea but works if you do not edit anything, why?
$("#placeholder").html(mystring);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div>Input whatever you want</div>
<textarea id="myarea" style="width: 300px; height: 70px">Initial text</textarea>
<div>
<button id="mybutton">Click after editing</button>
<br> The button is supposed to change the text to <em>Star wars</em>.
</div>
<div id="placeholder"></div>
</body>
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").val("Star wars"); //The changes have to be made on this line
$("#placeholder").html(mystring);
});
});
Inorder to change the value of textarea use val() , instead of html().

Check textarea or input have some special word in need

I want to make a coding area for my website,and I need to make it having color coded(syntax highlighting),and I Google so hard,but I still can't find the right answer for me, and here is my code now.
And I'm using Jquery
HTML:
<textarea class="CodeArea codingground">
<div class="HelloMate">
</div>
</textarea>
JS:
$(function(){
$('.CodeArea.codingground').on('input',function(){
var code = $(this).val();
if (code.indexOf('class')>=0) {
$( "textarea:contains('class')" ).css( "color", "red" );
}
});
});
This is not possible with a textarea.
You can use the <code> tag in conjunction with the contenteditable attribute. Some Javascript and you'll get what you want, even though you should consider to use a library for stuff like that.
var text = jQuery('code').text();
text = text.replace('class', '<span style="color: red">class</span>');
jQuery('code').html(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code contenteditable="true">
class Blubb() {
}
</code>

Change color .val jquery

I have got input where is write text for example - &1MyNicke&eName.
Tag &1 mean that, after tag &1 all text need to change for blue color, tag &e mean that, after tag &e all text need to change for yellow color.
I dont have idea how to make it (maybe check each symbol), so my code now is:
<div class="namecolorchange">
<center>
<p style="color: #000; font-weight: bold; font-size: 15px;">Change name color</p>
<input type="text" style="margin-bottom: 3px;" class="nameinput" name="nameinput">
<span name="namedemo"></span>
<input name="namebutton" type="submit" class="namebutton" value="">
</center>
</div>
<script>
$(document).ready(function() {
$( "input[name='nameinput']" ).keyup(function() {
var value = $( this ).val();
$( "span[name='namedemo']" ).text( value );
})
.keyup();
}
);
</script>
You need to use Regex to do this: I made a little example here.
var replaceValue = value.replace(/&1([\w]+)/, "<span style='color: blue'>$1</span>");
$( "span[name='namedemo']" ).html(replaceValue );
Demo for the update: http://jsfiddle.net/1xp658hr/1/

Dynamically create textbox on click button, and change it's css properties for selected textbox

Thanks once again,for all great mind's.
My expectation is exactly what the they have in example site.
example site:
http://www.printvenue.com/customer-design/editor/rounded-corner-business-cards/3-0128-vc-psd
--->creating text box dynamically onclick in CANVAS area only.
--->text box input text's font,font size,color .. changed by getting id
var somename = document.getelementbyid("id of textbox -in this case id getting uniquely");
somename = here all function for changing color, font are follows
but,
my problem is to add text box dynamically onclick button,so how to assing id for
var somename = document.getelementbyid("id of textbox(dynamically created text box id)");
At the same time that text box should be movable any were in canvas.
You can create a new HTML element like this:
var textBox = document.createElement("textarea");
To add it to the parent use
document.getElementById([insert id of parent here]).appendChild(textBox);
This parent should be the div/html-element in which all the textareas are located.
Example in JSFiddle
HTML
<div id='parent'>
<textarea>txt1</textarea>
<textarea>txt2</textarea>
<textarea>txt3</textarea>
</div>
<button onClick="addBox()">add textarea</button>
JS
addBox = function(){
var textBox = document.createElement("textarea");
document.getElementById("parent").appendChild(textBox);
}
Example in JSFiddle with JQuery
HTML
<div id='parent'>
<textarea>txt1</textarea>
<textarea>txt2</textarea>
<textarea>txt3</textarea>
</div>
<button>add textarea</button>
jQuery
$(function(){
$('button').on('click', function(){
var textBox = document.createElement("textarea");
$('#parent').append(textBox);
});
});
Here the link that you wanted :
JavaScript Version:
HTML
<input id='inp' type='button' value='Click me'/>
<div id='cont'>
</div>
JavaScript
document.getElementById('inp').addEventListener('click', function () {
var textarea = document.createElement('textarea');
textarea.className="mytextbox";
document.getElementById('cont').appendChild(textarea);
});
Css
.mytextbox{
width:200px;height:200px;box-shadow:2px 1px 5px 1px #000;
}
jQuery Version :
HTML
<input id='inp' type='button' value='Click me'/>
<div id='cont'>
</div>
jQuery
$('input').click(function(){
var textarea = $('<textarea></textarea>');
textarea.css({'width':'200px','height':'200px','box-shadow':'1px 2px 5px 1px #000'});
$('#cont').append(textarea);
});

How to get the value with getElementById in a class and use it in a different class

<body>
<div class="container">
Input
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="getString" placeholder="Enter some string">
</div>
<button type="button" class="btn btn-primary" id="nowBtn">Now</button>
</form>
<br/>
<br/>
All Headings<textarea class="form-control" rows="6"></textarea>
</div>
</body>
I am using bootstrap and I will give some string in the form, when the Now button is pressed.
I should get the <h1> tag of that string in the textarea (i.e <h1>some string</h1> in the textarea with applied <h1> tag ).
Is it achievable? I want to use jQuery.
From your comments I've understood you'd like to set the font-size in the textarea to same size as h1 tag would have.
Since there's no h1 tag in your HTML, you need to create a one in the click event handler function of the #nowBtn:
var header = document.createElement('h1'),
size = window.getComputedStyle(header, null).fontSize; // Depending used browser and CSS, this returns for example 32px
Then you can set the font-size of textarea like this:
$('textarea').css('font-size', size);
A live demo at jsFiddle.
EDIT
As bfavaretto has mentioned, a cross-browser way would be to use jQuery to get the size of the h1:
size = $(header).css('font-size');
Have a look at this fiddle - it might be what you want.
http://jsfiddle.net/Nj7pj/
$(document).ready(function () {
$('.btn-primary').on('click', function () {
inputVal = $('#getString').val();
newTextAreaVal = "<h1>" + inputVal + "</h1>";
$('textarea').val(newTextAreaVal);
});
});
I think you can do
var h1 = $("h1.classYouWant");
$(".form-control").val( "<h1>" + h1.text() + "</h1>" );
if is dynamic the header (h1 or h2 or h3 )
you can do
var header = $(".classYouWant").get(0);
$(".form-control").val( header.outerHTML );

Categories