I don't have idea how to do this, although I've seen it on numerouse websites. So, it is obviously an easy code, but I got stuck.
I create a simple app that displays textarea and a button. When you click the button, it adds one more textarea below. Therefore, I want to remove the frame (border) of the previous textarea when you click the add button. And also, to automatically select the next one for typing.
CLARIFICATION: User types in textarea some text, and presses the red button. It becomes green. And the border of the first textarea disapears (only text remains) and the added textarea below is automatically selected (clicked) and user can type in the text and again press the red button and so on. If user decide to return and change the text of previous textarea, the border will appear again.
THERE IS THE FIDDLE
And here is the code:
<textarea rows="3" cols="30" ></textarea><br/>
<input type="button" style="background-color:red;width:48x;height:20px;" id="btn1" value="ADD" onClick="change(this);addmore();">
<div id="inner"></div><br/>
function change(myinput) {
myinput.style.backgroundColor = "green";
}
function addmore() {
var textarea = document.createElement("textarea");
textarea.rows = 3;
textarea.cols = 30;
var div = document.createElement("div");
div.innerHTML = textarea.outerHTML + '<br/><input type="button" style="background-color:red;width:48px;height:20px;" id="btn2" value="ADD" onClick="change(this);addmore();"><br/>';
document.getElementById("inner").appendChild(div);
}
Related
Hello everyone I'm trying to wrap the selected text inside a text area between 2 stars
Entry would be for example vuejs => ** vuejs ** . Though I didn't figure out how to make the selected text wrapped with stars only.
//this is my text area object
<textarea class="outline-none w-100" id="textAreaExample3" rows="4" placeholder="taper
votre texte" ></textarea>
//this is the method that gets triggered on a button click when the text gets selected
makeSelectedTextBold(){
let text = document.getElementById('question').innerText;
// selected text
let selection = window.getSelection().anchorNode.data;
console.log(selection)
// wrap text to be shown on button click (I couldn't figure this out can someone help me)
},
This will help with the HTML:
<button id="button" onclick="makeSelectedTextBold()">here<button>
<textarea class="outline-none w-100" id="textAreaExample3" rows="4" placeholder="taper votre texte" ></textarea>
This will help with the JS:
document.getElementById("button").addEventListener("click");
function makeSelectedTextBold(){
let text = document.getElementById("textAreaExample3").value;
console.log("text:" + text)
let selection = window.getSelection();
console.log("selection:" + selection)
}
And this should help with finding and replacing the text:
Find and Replace for an Textarea
I don't quite understand what you're trying to do. Make ALL the text in the text area bold, or make the text appear in a console log in bold?
I have a website where you can enter information into an input box and then below it a button that says "add". When pushing this button I want it to create a new button with the text inputted above.
I'm not quite sure even where to start with the javascript but here's my html:
<input type="text" name="device" id="device">
<button class="add">Add</button>\
I'm just trying to make an add button make another button with the text in input box above.
Concepts
You need to change the DOM and append a new Element to your HTML.
To do this you need to capture the value when you click on the button and, after that, render the new element. I've created a Codepen to help you with that:
To explain:
HTML
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<p id="my-content"></p>
Every element has an id that you'll use on your...
Javascript:
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const content = document.getElementById('my-content')
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
content.innerHTML = myInputValue
})
By first we get all elements on DOM using document.getElementById function. After that we add an event to our button, the event of click. After that, we catch the value inputted by the user and change the HTML inner our p tag and put the text that have been inputted in our input.
So, after that, the text will be rendered on the screen and you can see what you have inputted.
Soluctions
By now, using this concept, we can now use this and change also, in our element, the style of showing or not. You can follow to this other Codepen that I'll use in our example:
HTML:
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<button id="my-other-button"></button>
Javascript
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const myOtherButton = document.getElementById('my-other-button')
myOtherButton.style.display = 'none'
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
myOtherButton.style.display = 'block'
myOtherButton.innerHTML = myInputValue
})
So, now we are capturing our elements as before, but that time we capture also an empty button and, with style.display property we change, when the first render occurs, to not showing our button. After we click in the first button we change it again to show it and, as before, change the innerHTML with the text that user have inputted.
I am making an unfair dice roller and I have a button with this code:
<button type="button" id="roll-button">Roll the Dice</button>
The button rolls the dice, but I want the site viewer to be able to change what this button says. I have no clue how to do this. Does it have to do with a variable in JavaScript?
Main Question: How do I make the person able to change the text with a form element?
Do you want this way?
Below code is create button tag. Also I set button tag attribute id and type.
HTML
...
<div id="root">
</div>
Javascript
<script>
var buttonText = 'Roll the Dice';
var button = document.createElement('button');
button.textContent = buttonText;
button.setAttribute('id', 'roll-button');
button.setAttribute('type', 'button');
document.getElementById('root').appendChild(button);
</script>
For the first time get the element from document and then change its text Content property to the variable text.
How do I make the person able to change the text with a form element?
Assuming that this is a text input, you'd have to get the value from the input then change the text of the button.
An additional text input field with the id "text-field" is added for this demo.
var textInput = document.getElementById("text-field").value; //gets text-field value
var button = document.getElementById("roll-button"); //gets the button element
button.innerHTML = textInput; //changes the value to what the text input is
I refer below example,
http://jsfiddle.net/rHDh9/
In example , if you click anywhere inside of textarea and if you click to button , it gets button value and sets to textarea where mouse clicked.
My question:
If i use below textarea , when i click to button , input value sets to textarea where mouse clicked.
<div id="100000000">
<input id="insertPattern" type="button" value="insert pattern" />
<textarea class="ckeditor" id="aboutme">insert some text into this string</textarea>
</div>
However if i use below Html.TextArea , if i click to button , input value never sets to Html.Textarea where mouse clicked.
<div id="100000000">
<input id="insertPattern" type="button" value="insert pattern" />
#Html.TextArea("editor", new { #class = "ckeditor", #id = "aboutme" })
</div>
Why it works for textarea and not work for Html.TextArea on button click ?
Where i miss exactly ?
any help will be appreciated.
Thanks.
If you are using CKEDITOR, you have to set values for text area like this.
CKEDITOR.instances['#aboutme'].setData('insert some text into this string');
You shouldn't be using #id when constructing your TextArea (or any form element, for that matter). Just use id = "aboutme".
I had this problem when editor was inside a container displayed with animation (modal, animation...)
So, i solved the problem like this :
var _objEditor = null;
function show_editor_control(){
$("#main_container").show('slide', {direction: 'left'}, 300);
setTimeout(initialize_editor,300);
}
function initialize_editor(){
if(_objEditor!=null) {_objEditor.destroy();};
CKEDITOR.replace('textarea_id');
_objEditor =CKEDITOR.instances["textarea_id"];
}
and for now, it works...
I am working with webapp-net to build an application for iOS/android. in my app I have a form with some text fields. I want to have a "X" icon that usually appear on text fields when an input is entered. by clicking on that icon you can remove the whole input in just one click. The icon "X" appears only when an input is entered, when the textfield is empty the icon is not visible. If you could just give me an example of how to do it, I would really appreciate it.
this simple html shows how to have an input field and a X button that calls a clean function when pressed
<input type="text" onkeypress="show();" id="text" /><div id="close" onclick="clean();" style="display:none">x</div>
Now the javascript
<script type="text/javascript">
function show(){
document.getElementById('close').style.display = ''; //shows the X button when text is entered;
}
function clean(){
document.getElementById('close').style.display = 'none'; //hides the X button
document.getElementById('text').value = ""; //clears the field
}
</script>
Of course this lacks validations like what type of key is pressed to avoid showing the X button when you press SHIFT or CTRL