I am using this plugin:
http://code.google.com/p/jquery-watermark/downloads/detail?name=jquery.watermark-3.1.4.zip
and problem is it submits the watermark value as textbox's value in IE9. How can I avoid this issue?
The issue is somewhat related to this post: http://code.google.com/p/jquery-watermark/issues/detail?id=91
but the author denies and marks the bug as invalid.
You could probably just use some simple JS and CSS and roll your own. Using massive all encompassing plug-ins are great when they work.
http://jsfiddle.net/VF8Dr/
https://stackoverflow.com/a/14246071/884862
CSS
.placeholder {
color: gray;
position: absolute;
padding-left: 10px;
}
JS
function addPlaceholder(id, text) {
var elm = document.getElementById(id);
var ph = document.createElement("SPAN");
ph.className = "placeholder";
ph.innerHTML = text;
elm.parentNode.insertBefore(ph, elm.nextSibling);
ph.style.left = elm.offsetLeft + 'px';
ph.style.top = elm.offsetTop + 'px';
ph.onclick = function() {
ph.style.display = 'none';
elm.focus();
};
elm.onfocus = function() {
if(ph.style.display != 'none')
ph.style.display = 'none';
};
elm.onblur = function() {
if(elm.value == '')
ph.style.display = '';
};
}
addPlaceholder("demo", "my text");
Depending on your needs, simple may be best.
I know this is very old post but today i faced the same issue.
Issue: Watermark value was passing as textbox value.
Basically i was using Watermark in all of search functionality and the entire search functionality controls are wrapped in update-panel including watermark text box. In my case because of updatepanel, textbox value being passed as watermark value to the serverside. So i took out watermark textbox out of updatepanel and everything working as expected now.
Related
this is my code:
const clcBtn = document.getElementById("calcButton");
let clcInput = document.getElementById("calcInput");
const result = document.getElementById('paragraph');
const loader = document.getElementById('spinner');
clcBtn.addEventListener("click", calcFunc);
function calcFunc() {
loader.classList.add("display")
fetch(`http://localhost:5050/fibonacci/`).then(function (response) {
return response.json().then(function (data) {
result.innerHTML = data.clcInput.value; // i want to get the input value from the input field and the server to calculate it and present it to the user.
});
});
}
basically what i want to do, is to add the value the user types in to the innerHTML paragraph id name.
and then i want to make the button react to the click and re-display the "loader" (which i gave it display:none in the CSS file)
and then, i need to make the button to display an error message if the input is higher than 50.
what i have tried to do:
inside the
clcBtn.addEventListener("click", calcFunc);
function calcFunc() {
i have tried to add:
loader.classlist.add("display")
and inside
return response.json().then(function (data) {
result.innerHTML = data.clcInput.value;
i have tried to add and change it to:
clcInput.value = innerHTML.result;
what am i doing wrong?
what is wrong with my syntax and what is the order i need to write everything?
thank you!!!
If i understand correctly what is you need, you should look at the small snippets I did below. It show a loader during the API Call and hide it when you get the result as well as updating the info paragraph depending on the value you typed.
The main thing I recommend you changing in order for your code to work properly is not adding or removing a class to your spinner element to hide it and show it, but simply changing directly it's style by using loader.style.display = "value"
Hope it helps.
const clcBtn = document.getElementById("calcButton");
let clcInput = document.getElementById("calcInput");
const result = document.getElementById('paragraph');
const loader = document.getElementById('spinner');
clcBtn.addEventListener("click", calcFunc);
function calcFunc() {
paragraph.innerText= "";
loader.style.display = "block";
// TimeOut to simulate API Call
setTimeout(function() {
loader.style.display = "none";
if (clcInput.value > 50) {
paragraph.innerText = clcInput.value + " - Error, value too high";
} else {
paragraph.innerText = clcInput.value + " - Value correct";
}
}, 2000);
}
#spinner {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
border: 5px solid black;
display: none;
}
<input type="number" id="calcInput" />
<button id="calcButton">calcButton</button>
<div id="spinner"></div>
<p id="paragraph"></p>
So I am fairly new to coding in general and I am currently working on an eCommerce website to develop my skills.
Using woocommerce in WordPress, I am trying to add a 'show/hide' style button to display or hide a chunk of text using JS, but not sure where I'm going wrong. Here is my JS code which is situated in my functions.php file:
var i=0;
function read(){
if(!i){
document.getElementByID("batbut").style.display ="inline";
document.getElementByID("read").innerHTML="Close";
i=1;
}
else{
document.getElementByID("batbut").style.display ="none";
document.getElementByID("read").innerHTML="Battery Warning Info";
i=0;
}
}
"batbut" is the span id for the chunk of text
"read" is the button id
"read()" is the onclick attribute
the chunk of text is currently hidden using css:
#batbut {
display: none;
}
any help would be much appreciated and if any more information is required just lmk. Thanks!
Try something like this,
check if your DOM nodes exists if yes the toggle based on the current display state of the batbut element
function read() {
const elmBatbut = document.getElementById("batbut");
const elmRead = document.getElementById("read");
if (!elmBatbut || !elmRead) return;
if (elmBatbut.style.display === 'none') {
elmBatbut.style.display = "inline";
elmRead.innerHTML = "Close";
} else {
elmBatbut.style.display = "none";
elmRead.innerHTML = "Battery Warning Info";
}
}
can anyone suggest an alternative method for show() in JavaScript that supports in ie11 s[enter image description here][1]ince show/hide not supporting it...
function displayPopUp(xPopUp,yPopUp,wPopUp,lPopUp,message)
{
showDivCache();
var oPopup=document.getElementById("popUpDiv");
oPopup.style.backgroundColor = "#D6D6D6";
oPopup.style.border = "solid black 3px";
oPopup.innerHTML = "<TABLE width='100%' height='100%'><TR valign='middle'><TD align='center'><B>"+message+"</B></TD></TR></TABLE>";
**oPopup.show(popUpX, popUpY, popUpW, popUpL, document.body);**
window.onfocus = redisplayPopUp;
var size=0;
var tabAllData=document.all;
if (tabAllData.document!=null)
size=document.all.length;
for (i = 0;i<size;i++)
{
fldObj = tabAllData[i];
fldObj.onfocus=redisplayPopUp;
}
return true;
I don't remember problems with IE11. How ever you can acheive this by many ways with jquery.
$('#id').toggle()
$('#id').fadeIn()
$('#id').fadeOut()
Using css
.hidden{
display: none;}
$('#id').addClass("hidden");
Or even
document.getElementById("id").style.visibility = "hidden";
//this one will remove the allocated space
document.getElementById("id").style.display = "none";
I have a small problem with my javascript code, im trying make a small application with 2 textboxes and 1 textarea. When textbox 1 is filled in you can press enter and then the focus will go to textbox 2. When textbox 2 is filled then the data from textbox 2 will go automaticly to the textarea as somekind of storage. And i fould like it to work with only plain javascript so it could support all the browsers and older browsers like IE 8
I have a massive javascript and every function works but somehow the big picture doesnt work. Can someone help me figure out why my javascript isnt doing what i want. And what i want is explained above.
https://jsfiddle.net/LLfwhL3L/2/
I cleaned the fiddle up fith the jshint functions from jsfiddle and get no erros, but it still doesnt work
These are the functions where i think it goes wrong:
function AddToList() {
var bonregel = document.getElementById("bonregel");
var val = bonregel.value.toString();
if (val != "") {
var box = document.getElementById("bonregelbox");
if (box.value != "")
box.value += "\n";
box.value = box.value + val;
}
bonregel.value = "";
bonregel.focus();
}
var delayrec = [];
function delay(callback, id, calldelay) {
clearTimeout(delayrec[id]);
delayrec[id] = setTimeout(callback, calldelay);
}
function keyup(event) {
var locatiebox = document.getElementById("locatie");
var bonregelbox = document.getElementById("bonregelbox");
var bonregels = bonregelbox.value.split(/\r\n/).join(",");
var locatie = locatiebox.value;
if (event.keyCode == 125)
SubmitContent(locatie, bonregels);
else
delay(AddToList, "AddToList", 500);
}
The working fiddle
https://jsfiddle.net/LLfwhL3L/5/
This is the working fiddle and how it should work, but on my device with IE 8 it doesnt work. The text from textbox 2 isnt goeing into the textaera. How can i solve this?
Iam working in an mvc application and using ckeditor 3.6.2 version. I have used the following code for getting selected html from ckeditor.
CKEDITOR.editor.prototype.getSelectedHtml = function () {
if (CKEDITOR.env.ie) {
this.focus();
selection = this.getSelection();
} else {
selection = this.getSelection();
}
if (selection) {
var bookmarks = selection.createBookmarks(),
range = selection.getRanges()[0],
fragment = range.clone().cloneContents();
selection.selectBookmarks(bookmarks);
var retval = "",
childList = fragment.getChildren(),
childCount = childList.count();
for (var i = 0; i < childCount; i++) {
var child = childList.getItem(i);
console.log(child);
retval += (child.getOuterHtml ?
child.getOuterHtml() : child.getText());
}
return retval;
}
};
I have an issue in chrome browser when I selected a text and call CKEDITOR.instances.editor1.getSelectedHtml().
For example, suppose in my editor there is a content <span style="color:red;">Welcome Note</span>. If I selected "Welcome Note" and call getSelectedHtml() method firefox,safari,IE8 returns "Welcome Note" with span tag, but chrome returns only the text "Welcome Note". If Iam trying to replace the selected content using CKEDITOR.instances.editor1.insertHtml("<div style='font-size:12px'>"+ CKEDITOR.instances.editor1.getSelectedHtml()+"</div>"), in chrome I lost the font color since getSelectedHtml() returns only the selected text. But this works fine with other browsers.
Note : If the content is "Welcome <span
style="color:red;">Note</span>" and the selected word is "Welcome
Note". In this case,this will be correct in chrome and other browsers.
Please suggest a proper solution.
There have been some similar cases that are documented on the CKEDITOR web site. In particular, take a look at this one:
http://cksource.com/forums/viewtopic.php?f=11&t=20202