I'm trying to dynamically detect if a textarea is empty or not. I'm doing this so I can show a send button only when there's text entered in the textarea.
I tried this code below, but it's not working.
var text = document.getElementById("text").value;
if (text !== ''){
alert("works");
document.getElementById("sendicon1").style.display = "none";
document.getElementById("sendicon2").style.display = "inline";
}
else{
alert("not working");
document.getElementById("sendicon2").style.display = "none";
document.getElementById("sendicon1").style.display = "inline";
}
Are you putting that code inside an onkeyup or onchange function? You could do something like:
window.onload = function() {
var text = document.getElementById("text");
var func = function() {
if (text.value !== '') {
alert("works");
document.getElementById("sendicon1").style.display = "none";
document.getElementById("sendicon2").style.display = "inline";
} else {
alert("not working");
document.getElementById("sendicon2").style.display = "none";
document.getElementById("sendicon1").style.display = "inline";
}
}
text.onkeyup = func;
text.onchange = func;
}
You don't need both the onkeyup and onchange, it depends on when you are looking for it to fire. onchange will be after you have taken focus away (blur) and onkeyup will be after each key is pressed inside the textarea.
It's very easy with input event.
var textarea = document.getElementById("text");
textarea.addEventListener('input', hideOnEmpty);
function hideOnEmpty() {
var text = this.value;
if (text !== ''){
alert("works");
document.getElementById("sendicon1").style.display = "none";
document.getElementById("sendicon2").style.display = "inline";
}
else{
alert("not working");
document.getElementById("sendicon2").style.display = "none";
document.getElementById("sendicon1").style.display = "inline";
}
}
See input event documentation for further details (MDN, W3schools). This code will fire hideOnEmpty function every time that content of textarea is changed.
Beware - this code will not work in IE8 or lower, and can fail to detect deletions in IE9 (but there is no reliable way to check if input has changed without polling in IE9).
You haven't listed jQuery as a dependency, but this is definitely an area where it would come it handy.
$('#text').on('input propertychange', function () {
if ($(this).val() !== "") {
$("#sendicon1").hide();
$("#sendicon2").show();
}
else {
$("#sendicon2").hide();
$("#sendicon1").show();
}
});
The input event will detect all changes to the textarea- key presses, copying and pasting, and more.
Related
I have a web form that uses a check box function. Users are bypassing the consent checkbox, however, as you can just hit a hard return after entering your creds. Trying to get something that will restrict the carriage return bypassing the check box...
function consentCheckBoxChecked() {
debugger;
var submitBtn = document.getElementById("submitButton");
var checkBox = document.getElementById("consentCheckBox");
if (checkBox.checked === true) {
submitBtn.classList.remove("is-disabled");
} else {
submitBtn.classList.add("is-disabled");
}
}
I think you should try something like this, in addition to applying required classes
<body onload="OnLoadEvent();">
</body>
Javascript:
function OnLoadEvent() {
document.getElementById("submitButton").Enabled = false;
}
function consentCheckBoxChecked()
{
var submitBtn = document.getElementById("submitButton");
var checkBox = document.getElementById("consentCheckBox");
if (checkBox.checked) {
submitBtn.Enabled = true;
} else {
submitBtn.Enabled = false;
}
}
I want to create "copy to clipboard" buttons to work on our sharepoint. They should be placed in a few different places, and what I need to copy is some text from from a specific field on the page (ex. a list of emails).
I know, I can just select the text and copy it, but we do it quite often, so having a button that automatically copies the text to the clipboard would be very useful.
I did manage to create one in a Script Editor, where I pasted the whole code below (which I found on the internet)
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboardMsg(document.getElementById("copyTarget"), "msg");
});
document.getElementById("copyButton2").addEventListener("click", function() {
copyToClipboardMsg(document.getElementById("copyTarget2"), "msg");
});
document.getElementById("pasteTarget").addEventListener("mousedown", function() {
this.value = "";
});
function copyToClipboardMsg(elem, msgElem) {
var succeed = copyToClipboard(elem);
var msg;
if (!succeed) {
msg = "Copy not supported or blocked. Press Ctrl+c to copy."
} else {
msg = "Text copied to the clipboard."
}
if (typeof msgElem === "string") {
msgElem = document.getElementById(msgElem);
}
msgElem.innerHTML = msg;
setTimeout(function() {
msgElem.innerHTML = "";
}, 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;
}
}//]]>
</script>
</head>
<body>
<input id="copyTarget" value="Some initial text"> <button id="copyButton">Copy</button><br><br>
<span id="copyTarget2">Some Other Text</span> <button id="copyButton2">Copy</button><br><br>
<input id="pasteTarget"> Click in this Field and hit Ctrl+V to see what is on clipboard<br><br>
<span id="msg"></span><br>
</body>
</html>
But we have main problems with it:
1) it reloads the page every time we click the "copy" button
2) it is not very elegant and friendly, when we think about updating our documents
I would be very grateful for any hints you may have for me, on how to make it work better.
This project may help: clipboardjs
I am seeing how I can make an Are You Human checkbox, but I am having a problem (Code At The End). I am trying to make it see if it is clicked until it is clicked. I tried onclick, but that is not working.
window.onload = function() {
var input = document.getElementById('ruhuman');
function check() {
if (input.checked) {
ruhuman.checked = true;
if (event.originalEvent === undefined) {
ruhuman.human = false;
} else {
ruhuman.human = true;
}
}
alert(ruhuman.human);
alert(ruhuman.checked);
}
input.onchange = check;
check();
}
<input type="checkbox" id="ruhuman" class="ruhuman" onclick="check()" required="required">
<label>R U Human?</label>
Edit: Thanks for your help! Finished product at http://ruhuman.github.io/.
To the people that answered I can put your github for your help!
originalEvent is JQuery, not JavaScript. A workaround is to test screenX and screenY -- if it's a human, these will have some value based on the checkbox position. Also, you can remove the onclick from your html and tie your click event like this:
document.getElementById ("ruhuman").addEventListener("click", function(e){
if (this.checked) {
ruhuman.checked = true;
if (e.screenX && e.screenY) {
ruhuman.human = true;
} else {
ruhuman.human = false;
}
}
console.log(ruhuman.human);
console.log(ruhuman.checked);
});
JS Fiddle Demo
This works: https://jsfiddle.net/rz4pmp5L/3/
var input = document.getElementById('ruhuman');
var ruhuman =
{
checked: false
};
function check()
{
if (input.checked)
{
ruhuman.checked = true;
}
alert(ruhuman.checked);
}
input.onchange = check;
check();
The problem was (at least) that ruhuman was not defined at all.
I've checked other questions about the same effect but the ones I found haven't helped.
The javascript code works perfectly but not on first click. (When clicked the first time nothing happens but every next time all is well.) It is placed at the end of HTML's <head> as
<script>
$(function () {
$("#askLink").click(function () {
if (document.getElementById('askArticle').style.display === "none") {
document.getElementById('askArticle').style.display = "block";
document.getElementById('CONTENT').style.display = "none";
}
else {
document.getElementById('askArticle').style.display = "none";
document.getElementById('CONTENT').style.display = "block";
}
});
});
</script>
And the askLink is set up as
<li>
Ask
</li>
Another hyperlink is set up pretty much the same way with a different function and isn't affected by such an issue.
What am I missing?
Remove the javascript from a href:
Ask
Should be this:
Ask
Or, you may use '':
Ask
Also, try to use preventDefault():
$("#askLink").click(function (e) {
e.preventdefault();
since you are using jQuery, you could simply do:
$(function () {
$("#askLink").click(function () {
var askArticle = $('#askArticle');
//check if #askArticle is visible
var isShown = askArticle.is(":visible");
askArticle.toggle(!isShown); //set to show or hide as per isShown
$('#CONTENT').toggle(isShown);
});
});
and btw, your link Ask will work without any change to it
Replace the 'javascript:;' from the anchor to '#'
Ask
And to prevent the page to be refreshed or go at the top use preventDefault() as such:
$("#askLink").click(function(e) {
e.preventDefault();
if(document.getElementById('askArticle').style.display === "none"){
document.getElementById('askArticle').style.display = "block";
document.getElementById('CONTENT').style.display = "none";
}
else{
document.getElementById('askArticle').style.display = "none";
document.getElementById('CONTENT').style.display = "block"; //Its block not "CD"
}
});
You should use on not click:
<script>
$(function () {
$("#askLink").on("click" , function (e) {
e.preventDefault();
if (document.getElementById('askArticle').style.display === "none") {
document.getElementById('askArticle').style.display = "block";
document.getElementById('CONTENT').style.display = "none";
}
else {
document.getElementById('askArticle').style.display = "none";
document.getElementById('CONTENT').style.display = "block";
}
});
});
</script>
How do i get a javascript code to only execute or be used once? example is
var stringToMatch = 'christopher';
function toggle (){
var input = document.getElementById('text').value;
if (input == stringToMatch){
document.getElementById('divColor1').style.display = 'block';
}
else {
document.getElementById('divColor1').style.display = 'none';
}
}
this code or stringToMatch i want to execute once, after that i dont care if it is deleted in the sense. for this is for coupons. and i am making multiples of this, so once someone has typed this i want it to delete
If I got you right, you could overwrite toggle() with an empty function.
if (input == stringToMatch){
document.getElementById('divColor1').style.display = 'block';
window.toggle = function() { };
}