I'm making art web project where I wan't to replace user inputed text to my own phrases in infnity.
Similar way like in game "Emily is away", but that will be only one phrase repeat in infinity.
Something like this:
"text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text"
When user will be typing, the result will be always the same phrase.
My code looks this way:
function myFunction() {
result.innerHTML = "TEXT";
}
<input type="text" onkeydown="myFunction()">
<div id="result"></div>
I will be really glad for help.
Is this what you mean? It will append the string to the existing output, rather than replacing it:
function myFunction() {
result.innerHTML += "TEXT ";
}
<input type="text" onkeydown="myFunction()">
<div id="result"></div>
let myInput = document.querySelectorAll('input');
myInput.forEach(input => {
input.addEventListener('keydown', function() {
result.innerHTML += "TEXT ";
});
})
<input type="text">
<div id="result"></div>
Related
Can someone help me to make html and javascript about adding a word in the middle of a sentence with user input? Thanks...
Sentence:
Aku sedang [User Input] disekolah.
Input Box | Button to make sentence
the result of the sentence that has been added to the word and entered by the user
ex:
Aku sedang makan disekolah.
for the html body:
<p>Aku sedang <span id="sentence">_____</span> di sekolah.</p>
<input type="text" id="userInput"> <button onclick="readMore()">modify</button>
then add the script
<script>
function readMore(){
let word = document.getElementById("userInput").value;
document.getElementById("sentence").innerHTML = word;
}
</script>
you can read other usability of HTML DOM in here
On my Ionic App I have a Textarea where the user can select a text and with button [BOLD]
add [b] [/b] around the selection.
How can I apply BOLD formating, replacing the [b] [/b] on the output text?
Thats my code. And here's the JsFiddle
<textarea id="TheTextInput" rows="5"></textarea>
<input type="button" id="TheButton" value="click" />
<input type="button" id="bold" value="BOLD" />
<pre id="TheOutput"></pre>
$(document).ready(function () {
$('#TheButton').click(PutTextIntoDiv);
});
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').text(decodeURIComponent(TheText));
}
$( "#bold" ).click(function() {
var textArea = document.getElementById("TheTextInput");
if (typeof(textArea.selectionStart) != "undefined") {
var begin = textArea.value.substr(0, textArea.selectionStart);
var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart);
var end = textArea.value.substr(textArea.selectionEnd);
textArea.value = begin + '[b]' + selection + '[/b]' + end;
}
});
Thanks for your help!!
*Its not duplicate from Is it possible to display bold and non-bold text in a textarea?
Cause I don't want format the text inside the textarea, but the OUTPUT text.
Consider PutTextIntoDiv() replacing with:
function PutTextIntoDiv() {
$('#TheOutput').html($('#TheTextInput').val().replace(/\[b\]/g, '<b>').replace(/\[\/b\]/g, '</b>'));
}
The <pre> in your JSFiddle should render <b> fine.
You can do a RegEx replace to convert the "BBCode" tags into html tags using .replace(/\[b\](.*)\[\/b\]/g, '<b>$1</b>'). Additionally, jQuery's .text() automatically encodes HTML entities, so you will not be able to add stylized text, so you should be using .html() instead. Overall, your code should be:
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').html(decodeURIComponent(TheText).replace(/\[b\](.*?)\[\/b\]/g, '<b>$1</b>'));
}
I'm not sure what the purpose of encoding and immediately decoding uri components is, but I tried to keep as much as I can untouched. Here's an updated fiddle: http://jsfiddle.net/TheQueue841/62karfm1/
I'm newbie in JavaScript. I'm trying to create something like stackoverflow's textarea(s) for writing a question-answer. Now I have some regex:
text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
text.replace(/__(.*?)__/g, "<u>$1</u>");
text.replace(/\*(.*?)\*/g, "<i>$1</i>");
text.replace(/--(.*?)--/g, "<del>$1</del>");
Also I have a textarea:
<textarea id="Q&A" name="txtarea" rows="4" cols="50"></textarea>
Now I want to apply those regex on the above textarea on click event (for every pressing key on keyboard). How can I do that?
You can use the oninput-Event for this:
function generate(text) {
text = text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
text = text.replace(/__(.*?)__/g, "<u>$1</u>");
text = text.replace(/\*(.*?)\*/g, "<i>$1</i>");
text = text.replace(/--(.*?)--/g, "<del>$1</del>");
text = text.replace(/`(.*?)`/g, "<code>$1</code>");
text = text.replace(/>(.*?)(\n|$)+/g, "<blockquote>$1</blockquote>");
document.getElementById("out").innerHTML = text
}
<textarea id="Q&A" oninput="generate(this.value)" name="txtarea" rows="4" cols="50"></textarea>
<div id="out"></div>
I have two text boxes.What I want to do is while i Write something in one text box it should be copied to the other(i am able to do so).But my requirement is if i write anything else rather then a-z or A-Z or 0-9 then it should not copied to the second text box.
my html
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)">
<textarea name="source2" id="src2" cols="150" rows="20" >
my js
function showRelated(e) {
$("#src2").val($("#src1").val()) ;
}
Let me explain little bit more,Suppose i write LO^&1VE then in the second text box LOVE should be copied only.now if i go further like adding more LO^&1VE C**V then in the second text box LOVE CV should be appaer only.Can any one suggest me how to do this?
Use the regular expression [^a-zA-Z0-9] to check for or replace characters that are not alphanumeric
function showRelated(){
$("#src2").val( $("src1").val().replace(/[^a-zA-Z0-9]/g,"") );
}
Demo
function showRelated(e){
$("#src2").val( $("#src1").val().replace(/[^a-zA-Z0-9]/g,"") );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="src1" onkeyup="showRelated(event);"></textarea>
<textarea id="src2"></textarea>
Rather brutal way of doing it but here goes
function showRelated(e) {
var text=$("#src1").val().split("");
var pattern=/^[a-zA-Z0-9]*$/
var nStr='';
for (var i=0;i<text.length;i++) {
if (pattern.test(text[i])) {
nStr+=text[i];
}
}
$("#src2").val(nStr);
}
Basically this will check each char follows your criteria and then puts it in if it does.
reposting for simplicity. i want to have the text users enter into an input to replace the label text of another form's input. Additionally, the form is a plugin which doesn't let me attach an id to the specific label tag of the text i want to change. how can i do this, in vanilla javascript please.
the input users put text into:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
the form label i want to change the text in (p.s: cant use the class(not unique to this label), cant add id):
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>
Maybe it is not the best solution, but it is a solution that works in Firefox and Chrome (not tested under IE)
findLabelToChange = function() {
var div = document.getElementById("frm_field_53_container");
return div.querySelector("label");
};
customizeText = function(text) {
return text + ' <span class="frm_required"></span>';
};
change1 = function() {
var label = findLabelToChange();
var text = document.getElementById("name1").value;
label.innerHTML = customizeText(text);
};
you can see a example in this feedle
http://jsfiddle.net/HAK5X/1/
Here is a fiddle.
It is one line of code.
http://jsfiddle.net/te3jv/6/
function change1(myInput){
document.getElementById('frm_field_53_container').querySelector("label").innerHTML =myInput.value;
}
Alternatively add <span class="frm_required"></span> to the end of HTML reassignment to keep your empty (but required?) span.