I have a table of element, and when i click on a td, i show something on atextarea
the problem is when i click, nothing show on the textarea...
what i actually do is that :
td.onclick = (function(textToShow){
return function(){
var textArea = document.getElementById("modification_bloc");
textArea.value = textToShow;
}
})(structure[key])
HTML code (is .ejs)
<form id="modification_bloc" action="modification_bloc" name="modification_bloc" class="hidden" type="post">
<textarea name="contenu_bloc" id="contenu_bloc"></textarea>
<br />
<input type="submit" value="Sauvegarder modifications"/>
</form>
the problem is that my textarea is always empty....
If i do a console.log of "textToShow" i have the text, and if i add the text as a placeholder i can see it in the console but not on the textarea. The innerHTML method works, but the text is obviously not editable รง^^
I don't get what is wrong.
can you help me? without JQUERY :)
Related
I have the following code to copy a text to the clipboard by clicking on a Button. Text is in a Paragraph element, So I move that text to a hidden input field and then copy it to the clipboard. But this is only working if I move the text to a text field but not a hidden field. I also tried to display:none the input field, but the result is the same. (I can't set it to visibility:hidden because the space matters). How can I solve this?
$("button").on("click", function() {
var n = $("p").text();
n = $.trim(n);
$(".copied").attr("value", n).select();
document.execCommand("copy");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>
Here is the editable jsfiddle:
http://jsfiddle.net/d9a4x6vc/
You can try to change the type of the input to text before select then, and bring the type hidden back after like that.
$("button").on("click", function() {
var n = $("#copyMe").text();
$(".copied").attr("value", n);
$(".copied").attr("type", "text").select();
document.execCommand("copy")
$(".copied").attr("type", "hidden")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="copyMe">
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>
I had exactly the same problem recently. What I did is put that input box position as absolute and moved it off screen. Also notice that even input field width does affect result. I tried to put width and height to 0, and it didn't copy after that also.
As DavidDomain explains in answer to a similar question, you need to change your input properties to take the value.
In your case, you can try this:
$("button").on("click", function() {
var n = $("p").text();
n = $.trim(n);
$(".copied").css({
position: "absolute",
left: "-1000px",
top: "-1000px"
}).attr("value", n).attr("type","text").select();
$(".copied").attr('css','').attr("type","hidden");
document.execCommand("copy");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>
I would like to clear a text box when a radio button above the text box is selected.
I have tried this:
function clearThis(target){
target = document.getElementById(target);
target.value = "";
}
<input type="radio" name="not_req" id="clear_req" value=""
title="Click here to clear the No Auth need flag"><span id="clear" onclick = 'clearThis("claims")' >Clear
The box I would like to clear is
<input type="text" size="5" name="auth_for" id="claims" value="{$prior_auth->get_auth_for()}" title="Set the number of times no auth can be used">
Took most of this from http://jsfiddle.net/BMrUb/ but I can see that the example is clearing the adjacent text box. I would like to clear a text box not adjacent to the radio button.
As Gerald said place your onclick="" in the <input type="radio" ... >, not in the <span>.
The problem is that it's the sibling input element that needs its value clearing, not the span, even though you only want it to clear when people click on the span element. So the example code below does this. You're also best off decoupling your javascript from your HTML by using event listeners (and not using the old-fashioned onclick attribute).
var clearSpanEl = document.getElementById("clear");
clearSpanEl.addEventListener("click", function(e) {
var inputEl = e.target.previousElementSibling;
inputEl.value = "";
}, false);
<input type="text" name="search" id="search" value="I can be cleared" />
<span id="clear">Clear results</span>
I've forked your JSFiddle here, so you can see it working.
I created one multi line text box.In that text box every time some remarks should be added with the different users. But existing content would not change or delete. The new text should add with that text box.
I tried the many ways to do this. But i can't find any one idea. People please help me to fix this issue.
<%: Html.TextArea("Remark", Model.Remarks, new { #maxlength = "400" })%>
This is just an example. Its better to have an input below the text area to get the text from to append and then clear it once appended, but you get the gist. It requires jquery.
(function($){
$.fn.extend({
valAppend: function(text){
return this.each(function(i,e){
var $i =$('#remark')
var $e = $('#comment');
$i.val($i.val() +'\n' + $e.val());
});
}
});
})(jQuery);
$('#append').click(function(){
$('textarea').valAppend();
$('#comment').val('');
$('textarea').attr('readonly','readonly');
});
textarea, input{display:block;}
#remark{height:100px; width:200px;border: 1px solid black}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="remark"></textarea>
<input type="text" id="comment" placeholder ="enter commment"></input>
<input type="button" id="append" value="append" />
I am having a text area and a button.Like this :
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />
Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do comment or answer a question on stackoverflow.
How this can be done ?Please help.
you can do this using javascript
add any tag before (generally div or span tag is used) textarea tag
<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />
Javascript code would be
function showtext(){
var text = document.getElementById("txtarea");
var showarea = document.getElementById("adduserdata");
showarea.innerHTML=text.value;
}
here is working example
As what you want, thus appending to the <div> division element, I assume that you will accept this answer (as a summary to all the comments and answers above) :
<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>
This can let you simply append it to the text. Fiddle
This will do if using Jquery (and previously text will stay) :
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});
or like this:
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});
Fiddle
Heres the particular html code, which consists of the button 'bold' and the text area.
<form name="myform">
< input type="button" onClick="Bold()" value="Bold">
</form>
<textarea name="myTextArea" id="myTextArea" cols="100" rows="14" placeholder="Enter Text Here ...">< /textarea>
Heres My Javascript
function Bold() {
myTextArea.document.execCommand('bold',false,null);
}
What am i doing wrong ????
You can simply use javascript like this:
function Bold() {
document.getElementById("myTextArea").style.fontWeight = 'bold';
}
Demo
If you want the textarea to display bold text, you can do that via css style attribute:
<textarea style="font-weight: bold">test-text</textarea>
Also, you can use div insted, and set contenteditable="true" http://jsfiddle.net/XNkDx/2852/ And, use hotkey ctrl+b
UPDATE:
If you want to use button, just, get selected text and change it http://jsfiddle.net/XNkDx/2859/
I Think you should use string.bold() function of javascript like this one:
function Bold() {
var str = document.getElementById('myTextArea').value();
var result = str.bold();
}
or you can use css style
{font-weight:bold;}