I would like to have more than one input which can output what the user has put inside the input box on one page and for it to update live. I can currently only get one input to work live.
HTML Code
<input type=text></input><!-- inputs live text -->
<p id="headingone"></p><!-- outputs live text -->
Javascript Code
function reverse(s) {
return s.split('').reverse().join('')
}
function set(el, text) {
while (el.firstChild) el.removeChild(el.firstChild);
el.appendChild(document.createTextNode(text))
}
function setupUpdater() {
var input = document.getElementsByTagName('input')[0]
, orig = document.getElementById('headingone')
, oldText = input.value
, timeout = null;
function handleChange() {
var newText = input.value;
if (newText == oldText) return;
else oldText = newText;
set(orig, newText);
}
function eventHandler() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(handleChange, 50);
}
input.onkeydown = input.onkeyup = input.onclick = eventHandler;
}
setupUpdater();
document.getElementsByTagName('input')[0].focus();
Related
here is my question.I am developing a translation chrome extension,and I want that the yellow page shows and gives me the translation when I select word.
this is my code
var txt = null;
document.onmouseup = function(e) {
e = e || window.event;
console.log("upbf txt:" + txt);
txt = funGetSelectTxt(); //get Select word
console.log("up txt:" + txt);
if (check(txt)) {
mydivm.style.display = "block";
//translate and show
}
};
document.onmousedown = function(e) {
txt = "";
var mydivm = document.getElementById("fgbnbb");
if (mydivm.style.display == "block") {
if (!isinclude(e, mydivm)) {
mydivm.style.display = "none";
}
}
console.log("down txt:" + txt);
};
var funGetSelectTxt = function() {
if (window.getSelection) {
return window.getSelection();
}
else if (document.getSelection) {
return document.getSelection();
}
else {
var selection = document.selection &&
document.selection.createRange();
if (selection.text) {
return selection.text;
}
return false;
}
return false;
};
Well,the question is,if I select a word in the html tag <p> or some other,it work well,but if I select a html tag <text>,it has some problem.
the first I selected,the page show and down well,then I click on the text,it show again(in my wish,it will hide),and in the three time,it hide.
I don't know why.the console log in the three time, I want know why and how to solve that .
I need some help please i have a nice copy to clipboard function which works well for ids and only one button on website.
But I need it to be done for multiple buttons and multiple values with class identifier i think but i really got no idea how to switch/change it from id identifier to class identifier and make it work for multiple buttons and inputs on one page.
Could you please help me?
This is my HTML button with ID identifier which i need for class to make it work for multiple buttons:
<button type="submit" id="bbcopyButton" class="btn btn-md btn-primary-filled btn-form-submit">BB Code copy</button>
This is the Input to copy from also by ID but i need to make it work with Class in order to copy more values from different input types:
<input type="text" class="form-control" id="bbcopyTarget" value="valueno.1" name="name" readonly="readonly" onclick="focus();select();">
I hope you understand what i want
Here is finally the Javascript Code which should be switched into class identifier in order to copy several/multiple values on one page:
document.getElementById("bbcopyButton").addEventListener("click", function() {
copyToClipboardMsg(document.getElementById("bbcopyTarget"), "bbcopyButton");
});
function copyToClipboardMsg(elem, msgElem) {
var succeed = copyToClipboard(elem);
var msg;
if (!succeed) {
msg = "Press Ctrl+c to copy"
} else {
msg = "BB Code copied <i class='lnr lnr-thumbs-up'></i>"
}
if (typeof msgElem === "string") {
msgElem = document.getElementById(msgElem);
}
msgElem.innerHTML = msg;
msgElem.style.background = "green";
msgElem.style.border = "2px solid green";
setTimeout(function() {
msgElem.innerHTML = "BB Code copy";
msgElem.style.background = "";
msgElem.style.border = "";
}, 2000);
}
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
Some help would be great.
Thanks.
I will make it a little bit clearer when i have a second button with same ID the Javascript/JQuery Code does nothing and cant point to second input value
This would be the second Button:
<button type="submit" id="bbcopyButton" class="btn btn-md btn-primary-filled btn-form-submit">BB Code copy</button>
And the second input where i want to copy from:
<input type="text" class="form-control" id="bbcopyTarget" value="valueno.2" name="name" readonly="readonly" onclick="focus();select();">
Hope this helps to understand better
Put this code:
var but = document.getElementsByClassName('btn btn-md btn-primary-filled btn-form-submit');
var txt = document.getElementsByClassName('form-control');
for (let x=0; x < but.length; x++){
but[x].addEventListener("click", function() {
copyToClipboardMsg(txt[x], but[x]);
}, false);
}
Instead of:
document.getElementById("bbcopyButton").addEventListener("click", function() {
copyToClipboardMsg(document.getElementById("bbcopyTarget"), "bbcopyButton");
});
This will only work if number of buttons = number of txt fields. If you want to avoid using let then you need to change it like this:
var but = document.getElementsByClassName('btn btn-md btn-primary-filled btn-form-submit');
var txt = document.getElementsByClassName('form-control');
for (var x = 0; x < but.length; x++) {
(function(x) {
but[x].addEventListener("click", function() {
copyToClipboardMsg(txt[x], but[x]);
}, false);
})(x);
}
I coded a jQuery function to remove automatically single and double quotes while writing text in to input box. In firefox everything goes good but in Chrome, if you want to add something beginning of the text, it is not allowed. Because the cursor always situated at the end of the input value. I don't know how I fix it. Here is my code:
$.fn.removeQuotes = function()
{
var elem = $(this);
elem.bind("focus propertychange change click keyup input paste", function(event)
{
setTimeout(function ()
{
elem.val(elem.val().replace(/['"]/g, ""));
}, 1);
});
};
EDIT: After comments, I tried this:
$.fn.removeQuotes = function()
{
var elem = $(this);
elem.bind("focus propertychange change click keyup input paste", function(event)
{
// store current positions in variables
var start = this.selectionStart,
end = this.selectionEnd;
setTimeout(function ()
{
elem.val(elem.val().replace(/['"]/g, ""));
}, 1);
// restore from variables...
this.setSelectionRange(start, end);
});
};
But nothing changed.
Here's a crude version for you to build on - https://jsfiddle.net/Sanjeevi/79gun3g0/1/
<div>
<input id="text-box" type="text">
</div>
$.fn.removeQuotes = function()
{
var elem = $(this);
elem.bind("keyup", function(event)
{
var start = elem.caret();
console.log(start);
elem.val(elem.val().replace(/['"]/g, ""));
setCaretPosition('text-box',start);
});
};
function setCaretPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
$(document).ready(function(){
$("#text-box").removeQuotes();
});
I have a HTML input in my site and i want to make "ENTER" forbidden in this box.
I mean user should not be able to enter into the box and if the user pasted some text, the enters gets converted to "space character" auto.
you can put this in the onchange of the text input/textarea
var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '');|
put this inside your header script tags and you should be good.
<script type="text/javascript" language="javascript">
window.onload = function() {
var txts = document.getElementsByTagName('TEXTAREA')
for(var i = 0, l = txts.length; i < l; i++) {
var func = function() {
var text = this.value;
text = text.replace(/\r?\n/g, '');
this.value = text;
}
txts[i].onkeyup = func;
txts[i].onblur = func;
}
}
</script>
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
Uses setTimeout and clearTimeout
<input type='text' id='text'>
var timer = null;
$('#text').keydown(function(){
clearTimeout(timer);
timer = setTimeout(doStuff, 1000)
});
function doStuff() {
alert('do stuff');
}
use the doStuff() function to execute code 1 second after user stops typing
The below is the html code:
<textarea name="test" rows="5" cols="20" placeholder="Brief description of your requirement,project, concept or idea"></textarea>
<script>
$(function() {
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
if (!supports_input_placeholder()) {
var fields = document.getElementsByTagName('textarea');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('placeholder')) {
fields[i].defaultValue = fields[i].getAttribute('placeholder');
fields[i].onfocus = function() {
if (this.value == this.defaultValue)
this.value = '';
}
fields[i].onblur = function() {
if (this.value == '')
this.value = this.defaultValue;
}
}
}
}
});
</script>
Please help me point out the mistake. placeholder fallback functionality is not working.I have been debugging it from long time.
Below is the link for fiddle:
check the functionality in ie9 and below as they doesn't support placeholder attribute:
http://jsfiddle.net/DxcYW/
Thanks
Here it is in pure JavaScript:
(function (D, undefined) {
'use strict';
var i, length, placeholder, textareas;
function hidePlaceHolder (placeholder) {
return function (e) {
var target;
target = e.target || e.srcElement;
if (target.value === placeholder) {
target.value = '';
}
};
}
function showPlaceHolder (placeholder) {
return function (e) {
var target;
target = e.currentTarget || e.srcElement;
if (target.value === '') {
target.value = placeholder;
}
};
}
if (! ('placeholder' in D.createElement('textarea'))) {
textareas = D.getElementsByTagName('textarea');
length = textareas.length;
for (i = 0; i < length; i += 1) {
placeholder = textareas[i].getAttribute('placeholder');
textareas[i].value = placeholder;
if (textareas[i].addEventListener) {
textareas[i].addEventListener('focus', hidePlaceHolder(placeholder));
textareas[i].addEventListener('blur', showPlaceHolder(placeholder));
} else {
textareas[i].attachEvent('onfocus', hidePlaceHolder(placeholder));
textareas[i].attachEvent('onblur', showPlaceHolder(placeholder));
}
}
}
}(document));
try putting your JS in
<script> ... </script>
tags. :)
My findings and solution:
Input fields have value attribute but TEXTAREA doesn't have it.
So when we use inputObj.defaultValue="sometext" for input tag it sets the default value as well as current value to sometext, if we dont define the attribute value="something" in the input tag.This works fine from ie9 and above. For below versions if we don't define value="sometext" inputObj.defaultValue="sometext" won't set current value as the default value by itself. For this we can do two things:
we have to manually give value="something which is equal to placeholder text"
we can get the value of placeholder through javascript and set the value from there.
This is not the case with textarea. Textarea doesn't have a attribute value. So when we use textareaObj.defaultValue="sometextarea text" then the default value is set to the given text but not the value itself as we don't have value attribute.value in textarea is nothing but the content between the textarea tags.
Difference between defaultvalue and value:
default value remains the same once it is set.
value is the current value which is being modified by javascript or ourself my typing into the textfield.
For my above issue I found a workaround just by adding one more line to my code:
<textarea name="test" rows="5" cols="20" placeholder="Brief description of your requirement,project, concept or idea"></textarea>
<script>
$(function() {
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
if (!supports_input_placeholder()) {
var fields = document.getElementsByTagName('textarea');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('placeholder')) {
fields[i].defaultValue = fields[i].getAttribute('placeholder');
fields[i].value = fields[i].getAttribute('placeholder');//setting the value
fields[i].onfocus = function() {
if (this.value == this.defaultValue)
this.value = '';
}
fields[i].onblur = function() {
if (this.value == '')
this.value = this.defaultValue;
}
}
}
}
});
</script>
Thank you guys for your quick replies and I pity the guy who voted down the question. I feel it is a good question. isn't it ?