When the user clicks a tag, I want to add append text to textarea using class name.
Click event handler works,but not adding text to the textarea.
Here's the code I have so far.
var boardName;
$(document).ready(function() {
$('.js-open-card-composer').click(function() {
boardName = document.title.replace(' | Trello', '');
$('.list-card-composer-textarea').text += boardName;
});
});
And, Here's the text area
<textarea class="list-card-composer-textarea js-card-title" style="overflow: hidden; word-wrap: break-word; height: 36px;"></textarea>
Thanks!
jQuery text() is function so instead of
$('.list-card-composer-textarea').text += boardName;
use
var data = $('.list-card-composer-textarea').text();
$('.list-card-composer-textarea').text( data + boardName);
Use html instead of text
var boardName;
$('.js-open-card-composer').click(function() {
boardName = 'test';
var data = $('.list-card-composer-textarea').html();
$('.list-card-composer-textarea').html(data+boardName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="list-card-composer-textarea js-card-title" style="overflow: hidden; word-wrap: break-word; height: 36px;"></textarea>
<div class="js-open-card-composer" style="width:20px;height:20px;border:1px solid red"></div>
Related
How can I display a wall of text example:
hello
<br>
how is your day
<br>
123
Into
hello
how is your day
123
I'm trying to display these into a textarea field as well.
I've tried with this
$('<textarea />').html(theString).text(); but it does not display my desired result
Edit:
Current code:
function displayCustom (data) {
var myString= data.getAttribute("data-contentDetails");
$('#textareaContent").html(myString);
}
this is not possible to do this with textarea. you can use content editable div
var theString = `Hello.<br>Hi.<br>Hey, <strong>user</strong> <span style="color: red">Logout</span>.`
// in pure js
document.getElementById('textareaContent').innerHTML = theString;
// OR in jQuery
$('#textareaContent').html(theString)
div {
width: 250px;
height: 150px;
border: 1px solid #ababab;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="textareaContent" contenteditable="true"></div>
UPDATE
if you have to use textarea and just need to use <br /> (you couldn't use another HTML tag as a text) you can use:
var myString = `Hello<br>Hi<br>Hey, use`
$('#text').html(myString.replace(/<br>/g, '\n'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="text"></textarea>
Use a Div with a contenteditable attribute if you want the user to edit the displayed new format. Try to append or insert this.
For a textarea
$('<div contenteditable="true" />').html(theString);
Just remove the contendeditable="true" attribute if you just want to display the new format.
I need something like a fill in the blanks sheet for children. When people click the ------ (dashes) it should turn into a textbox, and people can type it. after that when they move from that element after typing, it should turn into the text that they entered inside that text box.
I really dono how to approach this problem. I tried the following code, but what happens is, i am unable to type inside the text box. The cursor is not appearing at all
<html>
<head>
<title>NSP Automation</title>
<script src ="jquery.min.js">
</script>
</head>
<body>
<div class="container">
My Name is = <span id="name">__________<span>
</div>
<script>
$(document).on('click', '#name', function(){
document.getElementById("name").innerHTML = "<input type=\"text\">";
});
</script>
</body>
</html>
any pointers on how to achieve this ?
Thanks,
Since you've set the listener on the whole document, you will be recreating the input-tag with every click. Try something like:
$('#name').on('click', function(){
this.innerHTML = "<input type=\"text\">";
$('#name').off('click')
}
After clicking on the span-element, you remove the listener on it again, and you should be able to type.
http://jsfiddle.net/218rff9v/
Here is an example that generates the wished behaviour for all spans in your container. Some details can be improved but I think it's working as expected.
function convertSpanToInput() {
// Insert input after span
$('<input id="tmp_input">').insertAfter($(this));
$(this).hide(); // Hide span
$(this).next().focus();
$("#tmp_input").blur(function() {
// Set input value as span content
// when focus of input is lost.
// Also delete the input.
var value = $(this).val();
$(this).prev().show();
$(this).prev().html(value);
$(this).remove();
});
}
$(function() {
// Init all spans with a placeholder.
$(".container span").html("__________");
// Create click handler
$(".container span").click(convertSpanToInput);
});
Here is an html example with which you can test it:
<div class="container">
My Name is = <span></span>. I'm <span></span> years old.
</div>
JsFiddle: http://jsfiddle.net/4dyjaax9/
I'd suggest you have input boxes and don't do any converting
Simply use CSS to remove the borders and add a dashed border bottom
input[type=text]{
border:none;
border-bottom:1px dashed #777;
} <!-- something like that -->
add a click handler to add a edited class, so you can remove the bottom border
input[type=text].edited{
border:none;
}
That way you don't need to replace html elements, you just style them to look different
Why not use text input and only change CSS classes?
CSS:
.blurred{
border-style: none none solid none;
border-width: 0px 0px 1px 0px;
border-bottom-color: #000000;
padding: 0px;
}
.focused{
border: 1px solid #999999;
padding: 3px;
}
JavaScript:
$('#nameInput').focus(function(){
$(this).removeClass('blurred').addClass('focused');
});
$('#nameInput').blur(function(){
$(this).removeClass('focused').addClass('blurred');
});
HTML:
<div class="container">
My Name is = <span id="name"> <input id="nameInput" type="text" class="blurred"></input> <span>
</div>
Check this jsfiddle:
http://jsfiddle.net/gwrfwmw0/
http://jsfiddle.net/we6epdaL/2/
$(document).on('click', '#name', function(e){
if( $("#myText").is(e.target))
return;
$(this).html("<input type='text' id='myText' value='"+ $(this).html() +"'>");
});
$(document).on("blur", "#name", function(){
$(this).html( $("#myText").val() );
});
I am truncating text using ellipsis and showing the entire text on the tooltip. If the text overflows then only the tool tip is shown.
The tooltip looks fine in Chrome, but not in IE and Firefox. In IE, the tooltip text is also truncated and in firefox, the tooltip itself is cut.
<div class="card">
<p>From:</p>
<p> Dark Angel </p>
<p class="ellipsis"> QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQAAAAAA
New york, US<p>
<div>
CSS:
.card {
height:416px;
width:280px;
display:block;
border: 1px solid black;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
jQuery:
$('p.ellipsis').bind('mouseenter', function () {
var $this = $(this);
if (this.offsetWidth < this.scrollWidth && !$this.attr('title'))
$this.attr('title', $this.text());
You can give the element a different class name and then use Javascript to update it, setting the relevant ellipsis class name, as well as capturing the text at that time and storing it as a data attribute of the element, so you can access it later.
Note that I changed the <p> tag to have the class name pre-ellipsis...
// add a data-title attribute with the original text, then modify the class list
// to remove pre-ellipsis and add ellipsis
$("p.pre-ellipsis").each(function() {
var $this = $(this);
$this.data("title", $this.text());
$this.removeClass("pre-ellipsis").addClass("ellipsis");
});
// your original code, but modified to get the tooltip text from the data attribute
$("p.ellipsis").on("mouseenter", function () {
var $this = $(this);
if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
$this.attr('title', $this.data("title"));
}
});
.card {
height:416px;
width:280px;
display:block;
border: 1px solid black;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card">
<p>From:</p>
<p> Dark Angel </p>
<p class="pre-ellipsis"> QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQAAAAAA
New york, US<p>
<div>
I wanted to display variable value in alert box.
please see below code :
<script>
function check() {
var content = document.getElementById("one").value;
alert(content);
}
</script>
<body onload="check()">
<div style="position: absolute; z-index: 9; width: 450px; top: 38px; margin-left: 176px;">
<style>
div#layout {
margin:0px;
padding:px;
width:450px;
margin:0px auto;
overflow:hidden;
}
</style>
<div id="layout">
<span id="one" style="display:none" ph="layout1" class="ione">yes</span>
<span id="two" style="display:none" ph="layout1" class="ione">no</span>
</div>
</div>
</body>
When i am executing this code then it is showing value as undefined in alert box.
value in span id"one"is changing in different different situation.
i want to track every time...so i cant hardcode it.
can you please help in this?
spans not have the value in html
one is the id for span tag
in javascript use
document.getElementById('one').innerText;
in jQuery use
$('#one').text()
function check() {
var content = document.getElementById("one").innerText;
alert(content);
}
or
function check() {
var content = $('#one').text();
alert(content);
}
$(document).ready(function(){
// alert("test");
$("#name").click(function(){
var content = document.getElementById("ghufran").innerHTML ;
alert(content);
});
//var content = $('#one').text();
})
there u go buddy this code actually works
Try innerText property:
var content = document.getElementById("one").innerText;
alert(content);
See also this fiddle http://fiddle.jshell.net/4g8vb/
Clean way with no jQuery:
function check(some_id) {
var content = document.getElementById(some_id).childNodes[0].nodeValue;
alert(content);
}
This is assuming each span has only the value as a child and no embedded HTML.
document.getElementById('one').innerText;
alert(content);
It does not print the value;
But, if done this way
document.getElementById('one').value;
alert(content);
Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files
Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?
just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text
Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.
Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();
try yo write
document.getElementById('id').style.visibility="hidden";