Below is my code for the text area.
<div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
</div>
I want to display the content entered in this text area in another DIV.
Below is the code to display the content of text area.
<div data-bind="text: environment"/>
This div is displayed as shown in the below image.
Issue:
The new line is not captured when I am displaying the content in another div.
What all I tried?
I tried below ways to see if new line /n will be displayed as is, from text area.
But, no luck !
<div data-bind="html: environment"/>
<div data-bind="value: environment"/>
Please suggest if anyone has faced such issues.
Thank You!
Add the css rule white-space: pre-wrap to your div:
var viewModel = {
environment: ko.observable("initial text")
}
ko.applyBindings(viewModel);
div {
white-space: pre-wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>Change text and click outside textarea in order to update value.</div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
<div>Entered text:</div>
<div data-bind="html: environment()"></div>
It's a bit dirty, but... You can replace '\n' with '' for display div:
var viewModel = {
environment: ko.observable("initial text")
}
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>Change text and click outside textarea in order to update value.</div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
<div>Entered text:</div>
<div data-bind="html: environment().replace('\n', '</br>')"></div>
Related
As in title, I would like to see what I'm writing by input text.
There is my code:
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
When I'm writing I can see [object HTMLInputElement] inside h2 but if I'm not writing nothing I can't see nothing on it. Any ideas?
You don't have to set the object txtLogo as text, but instead its value.
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
In your case, you are passing an element. But you need to pass the text value of this element. You can solve this problem in two ways.
Add the value parameter to txtLogo. It should be like this:
myLogo.text(txtLogo.value);
Or you can write the same parameter for this, in event onkeyup, inside the <input> tag. Like this:
onkeyup="setLogo(this.value)"
/*This is my jquery I am working with now*/
$(document).ready(function () {
$('.edit').click(function() {
var content = $('.paste').html();
$('#area').html(content);
});
});
<!--This is my html code am using.. I want when I click Edit 1 the content of paragraph one is copied into my textarea and when I click Edit 2 link the paragraph is copied into textarea. The code now is working such that when I click Edit 2 the content of Edit 1 is copied in both cases...-->
<div class="article">
<p class="paste">Paragraph one </p>
Edit 1
</div>
<div class="article">
<p class="paste">Paragraph two </p>
Edit 2
</div>
<textarea rows="5" class="form-control" placeholder="Enter text..." id="area"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).ready(function(){
$('.article').find('.edit').on('click',function(event){
event.preventDefault();
var paraContent = event.target.parentNode.childNodes[1].textContent;
$('#area').val(content);
});
});
I have managed to research deeply online and come with an answer to my question. Thanks to anyone who was willing to help me with an answer.
I am trying to make a textarea appear when I click on a button because I don't need it to be displayed by itself in my html page.
I'm using something like:
<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical" ></textarea>
But this is not resolving my problem.
Any idea how I can do that?
I actually have two textarea that display the content of existing files, and when I click on a button to show the content in one text area and then click on the second button to show the content of the second textarea, the first textarea becomes empty while I need to keep both contents in both textareas displayed at the same time! How can I do that too?
If you're using jQuery already, you might do something like this:
<textarea cols="50" rows="20" name="text" id="text_id" class="form-control" style="resize:vertical;display:none"></textarea>
<button class="show_button">Show/hide textarea</button>
<script>$(".show_button").click(function(){$("#text_id").toggle()})</script>
This will toggle the textarea for showing
I'm just assuming you're using jQuery, since form-control is used with Bootstrap - That requires jQuery.
You can use simple javascript or even jquery. But for simple javascript u can do it like this:
On script tag inside head section write:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical' ></textarea>";
}
</script>
On Body section :
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click here</button>
<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical; visibility:hidden'> </textarea>
<button onClick='document.getElementById("text_id").style.visibility = "visible" '> Click me !</button>
This is the most compact way you can do this I can think of:
We are giving the Textarea a CSS property to stay hidden Display = 'none'.
Once the button is clicked, it changes that css property to Display = 'block' to make it visible.
<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical; display = 'none'"></textarea>
<button onclick = "document.getElementById('text_id').style.display = 'block'">
I have a text input field and a div that contains an image.
I would like the image to disappear once a person starts typing in the input field.
<div id="writehere">
<input type="text" id="myinput">
</div>
<div id="container">
<div id="introimg"><img src=.../intro.png"/></div>
</div>
try this code.
$(document).ready(function () {
$("#myinput").keypress(function () {
$("#container").hide();
});
});
But how do you want to show the pic again?
<input type="text" id="example"></input>
<div id="test"></div>
Is there anyway I can make text entered in #example appear in #test?
You have to use Javascript. Basically, with jQuery:
$("#example").change(function(){
$("#test").html($("#test").html() + $("#example").html());
});
this will do the trick:
$('#example').keyup(function(){
$('#test').val(this.value);
});