I'm trying to put 3 or 4 buttons that would help registering users to enter their e-mail addresses. Basically what I need is when they click "#gmail.com" button, their address will be completed with that. I ended up with a code like this:
function insertText(elemID, text) {
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
<form>
<textarea id="txt1"></textarea>
<input type="button" value="Insert some text" onclick="insertText('txt1', 'Hello');">
</form>
However as you can try and see, it's not working when a user enters some text inside and clicks the button. I want to resolve this issue with minimum amount of script and preferably without jQuery.
Note: I will place this code snippet inside a block, but the textarea might be not in the same block. Is that possible to still make use of it?
A <textarea> element uses value not innerHTML:
function insertText(elemID, text) {
var elem = document.getElementById(elemID);
elem.value += text;
}
Change elem.text to elem.value in your code
function insertText(elemID, text) {
var elem = document.getElementById(elemID);
elem.value += text;
}
Related
I am trying to make a content editable div that can be used to generate message templates for an app. Users can append placeholders for fields like names to a template by hitting a button. The placeholders can be removed by hitting an 'x' on them as well. Here's the working snippet.
var removePlaceholder = function(e){
e.parentNode.parentNode.removeChild(e.parentNode);
}
var appendPlaceHolder = function(field){
var e = document.getElementById("t");
e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span>')
}
.tag {
background-color : blue;
color : white;
}
.remove {
color : red
}
<div id="t" contenteditable="true">Hello</div>
<button onclick=appendPlaceHolder("first_name")>Add first name</button>
The contenteditable part works just fine. But after I've added a placeholder using my appendPlaceHolder function, everything I type seem to get appended to the last inserted HTML element.
How can I prevent this. I have closed the tag properly. Is there any way to change this behaviour.
To recreate issue, run the snippet and hit the "Add First Name" Button, then continue typing in the area.
Update
Have added image to explain the situation
What you can do is add a space after the placeholder has been appended:
JavaScript
var removePlaceholder = function(e){
e.parentNode.parentNode.removeChild(e.parentNode);
}
var appendPlaceHolder = function(field){
var e = document.getElementById("t");
e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span> ')
}
Note: The which has been added at the end of the span just creates a space.
Live Example
JSFiddle
Is it possible to execute copy command using click EVENT?
I have some text selected and I want this text to be copied on onClick event, so that I am able to past this text to another page with out using right click or CTRL+C to copy the text.
function copyText(){
var txt = '';
if (window.getSelection)
txt = window.getSelection();
else if (document.getSelection)
txt = document.getSelection();
else return;
document.getElementById("a").value=txt;
allCopied =document.getElementById("a").createTextRange();
allCopied.execCommand("RemoveFormat");
allCopied.execCommand("Copy");
}
but for security reasons most browsers do not allow to modify the clipboard( except Internet explorer).
HTML
<form name="myForm">
<span onclick="copyText(this)" >Text1</span>, <span onclick="copyText(this)" >Text2</span>
<br>
<input name="myField"></input>
JavaScript
function copyText(element) {
document.myForm.myField.value = element.innerHTML;
}
Copy to Clip Board Ctrl+C
$("#text1").click(function(){
var holdtext = $("#clipboard").innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
});
use getselection() to get selected text inside a browser window
I have an unknown number of input boxes with unknown IDs. I would like to be able to click on an input box and have a trimmed version of the value populate a div.
JSFiddle
My code all works as expected once the input field is edited, but I want to have the value displayed on first click/focus.
This is the JS function I wrote.
JS
$('input').each(function() {
var $tthis = $(this),
defaultValue = $tthis.val();
defaultValue = defaultValue.substring(keyed.indexOf("|") + 1);
defaultValue = defaultValue.substring(0, defaultValue.length - 2)
$("#target").html(defaultValue);
});
HTML
<input
id='thistext$index'
type='text'
onclick='this.select();'
onfocus="
document.getElementById('show_hide').style.display='block';
document.getElementById('show_hide2').innerHTML = 'Copy this text into the wiki, it will display as: ';"
onblur="document.getElementById('show_hide').style.display='none';" value='[[http://www.example.com/$dirArray[$index]|$dirArray[$index]]]' />
<div id='show_hide'>
<div id='show_hide2'>
</div>
<div id='target'>
</div>
</div>
I restructured your code a bit from the first fiddle.
I threw out all inline javascript and it's handlers, the onFocus, onBlur, onClick and replaced with jQuery equivalents and I think I got what you wanted.
I used jQuery's on() method to do the same thing which cleaned up the HTML a lot.
Then I used a function within show() to trigger a few other functions.
This could be more procedural but I thought it was nice and clean.
And lastly I extracted out the trimming and substringing to it's own function so that you can reuse it later on.
A fiddle here and the code below:
$('input').on('click', function() {
var $input = $(this);
$('#show_hide').show(function(){
$('#show_hide2').text('Copy this text into the wiki, it will display as:');
var text = trimInputValue($input);
$('#target').text(text);
});
});
function trimInputValue($input) {
var text = $input.val();
text = text.substring(text.indexOf("|") + 1);
text = text.substring(0, text.length - 2);
return text;
}
$('input').on('focusout', function() {
$('#show_hide').hide();
});
Now you might wonder where your select() went off to.
Don't worry, just include it in your on('click', function(){ select(); }); and it should execute.
I'm trying to make it so that the text inside a text area can be toggled to be bold or not, by pressing a button. I have the following code:
function bold()
{
var ta = document.getElementById("textArea");
if(ta.style.fontWeight == "normal"){
ta.style.fontWeight = "bold";
}
else{
ta.style.fontWeight = "normal";
}
}
When the I press the button, nothing happens the first time. But I press it a second time and it runs perfectly. Running it through a debugger, the variable "ta" becomes equal to "" the first time, and then "normal" the second time, despite the text area being set to normal in the css.
Any ideas?
Thanks
So the reason this is happening is because ta.style is accessing the style attribute of the textarea element, which will not have any information about styles coming from CSS. You could write your textarea like this, and it should work with what you have:
<textarea id="textArea" style="font-weight:normal"></textarea>
But, I'd recommend you do something along these lines in your js:
function bold()
{
var ta = document.getElementById("textArea");
if(ta.style.fontWeight !== "bold"){
ta.style.fontWeight = "bold";
}
else{
ta.style.fontWeight = "normal";
}
}
Might also be helpful to rename your function to toggleBold ;)
Instead of trying to fight it, just change your condition:
if (ta.style.fontWeight == "normal" || ta.style.fontWeight === '') {
i would like to replicate that you see a regular input text and when you click it changes into textarea.
is this a hidden layer or is it actually changing the input to textarea? how to do it?
I do believe it's always a textarea and on focus they just change the height of the textarea.
Edit: yes, it is. They use scripting to do everything with a textarea, there is no input field.
<textarea onfocus='CSS.addClass("c4b900e3aebfdd6a671453", "UIComposer_STATE_INPUT_FOCUSED");CSS.removeClass("c4b900e3aebfdd6a671453_buttons", "hidden_elem");window.UIComposer && UIComposer.focusInstance("c4b900e3aebfdd6a671453");' id="c4b900e3aebfdd6a671453_input" class="UIComposer_TextArea DOMControl_placeholder" name="status" title="What's on your mind?" placeholder="What's on your mind?">
What's on your mind?
</textarea>
One method that I found was to have a text area that begins with a smaller width and height and then to dynamically resize it.
function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}
then you would call your function with an onclick event
onclick="function sz(this)"
I found this here
Fellgall Javascript
One problem that he does mention is that this only functions on browsers that support it.
You can combine the jQuery widget you can find here with some coding
Example:
<div id="myform">
<form>
<textarea></textarea>
<button type="submit" style="display:none;">Post</button>
</form>
</div>
<script>
$(document).ready(function(){
var widget = $('#myform textarea');
var button = $('#myform button');
var tarea = widget[0];
// turn the textarea into an expandable one
widget.expandingTextArea();
var nullArea = true;
tarea.value = "What's on your mind?";
widget.focus(function() {
button.css('display', 'block');
if (nullArea) {
tarea.value = "";
nullArea = false;
}
});
widget.blur(function() {
if ($.trim(tarea.value) == "") {
tarea.value = "What's on your mind?";
button.css('display', 'none');
nullArea = true;
}
});
});
</script>
This code will hide by default the post button and will show it only when the textarea is focused or when you already have written something into it (you may want to hide/show a div instead or anything you want).
If jQuery is an option for you at all, there's a jQuery plugin that does just this called Jeditable.
Check out the demos here.
One way to do this is to code a dynamic textarea. This article explains how to do it: http://www.felgall.com/jstip45.htm
Another way to do it is to change the type of the object. Let's say you place your input text in a div tag (its ID being "commentBox". The code would then be:
//when you click on the textbox
function makeTextArea()
{
document.forms[0].getElementById("commentBox").innerHTML = "<textarea id=\"comments\" onBlur=\"backToTextBox()\"></textarea>";
document.forms[0].getElementById("comments").focus();
}
//when you click outside of the textarea
function backToTextBox()
{
document.forms[0].getElementById("commentBox").innerHTML = "<input type=\"text\" id=\"comments\" onFocus=\"makeTextArea()\"/>";
}