/**
* Add instructional copy support for text fields and text area.
* The method will clear the copy, and swap styles.
*
* @param textField the text element that will be enhanced.
* @param copyClass class used for instructional copy
* @param noCopyClass class used for plain text
*/
function sl_addClearCopyListeners (textField, copyClass, noCopyClass){
// set default value in the object itself
textField.originalCopy = textField.value;
textField.copyClass = copyClass;
textField.noCopyClass = noCopyClass;
// add listiners
textField.onfocus = function(){
if (this.value == this.originalCopy){
this.value = '';
sl_replaceClass(this, this.copyClass, this.noCopyClass);
return false;
}
return true;
};
textField.onblur = function(){
if (this.value == ''){
sl_replaceClass(this, this.noCopyClass, this.copyClass);
this.value = this.originalCopy;
return false;
}
return true;
};
};
/**
* Replace a class with another, leaving other classes untouched.
* If the class does not exist, nothing will happen.
*
* @param domElement the text element that will be enhanced.
* @param oldClass class to replace
* @param newClass the replacement class
*/
function sl_replaceClass(domElement, oldClass, newClass){
var elementClass = '' + domElement.className;
// save some work, avoid flashing
if (elementClass.indexOf(oldClass) > -1){
elementClass = elementClass.replace(oldClass , newClass);
domElement.className = elementClass;
}
}
Tag Archive for input
Toggles instructional and default copy text and styles
Category: Uncategorized |
Tags: area, copy, field, input, instructional, javascript, text, textarea, TextField
File
<div class="file"><label for="$1">$2:</label><input type="file" id="$1" name="$1" /></div>$3
Radio
<div class="radio"><input type="radio" name="$1" id="2" ${3:checked="checked"} /><label for="$1">$4</label></div>$5
Checkbox
<div class="checkbox"><input type="checkbox" id="$1" name="$1" ${2:checked="checked"} /><label for="$1">$3</label></div>$4
text
<div class="textfield"><label for="$1">$2:</label><input type="text" id="$1" name="$1" title="${3:Enter your ${2/./l$0/} here}" value="$4" /></div>$5
Copy/repeat input form values
function copyDown(nm) {
// written by Daniel P 3/20/07
// repeat the values of the first row of a column down the whole column
// special case for sku: value in incremented as you go down.
// also, values are only filled in for rows that have a sku filled in
var lastskuindex = document.getElementById('lastindex');
var firstitem = document.getElementById(nm+'0');
z = firstitem.value;
for ( i=1; i<=lastskuindex.value; i++ ) {
//window.receivelist["Received"+i].checked=true;
if (nm=='SKUCode' && z!='') { // special case for skucode (when not blank)
z++; // increments the sku
zstring = z.toString();
if ( zstring.length == 1 ) zstring='00000'+zstring;
if ( zstring.length == 2 ) zstring='0000'+zstring;
if ( zstring.length == 3 ) zstring='000'+zstring;
if ( zstring.length == 4 ) zstring='00'+zstring;
if ( zstring.length == 5 ) zstring='0'+zstring;
document.getElementById(nm+i).value = zstring;
} else {
if (document.getElementById('SKUCode'+i)) { // if there's an editable skucode (only add page)
if (document.getElementById('SKUCode'+i).value != '') { // only update this row if sku is filled in for this row
document.getElementById(nm+i).value = firstitem.value;
}
} else { // not add page, so we just update regardless of if sku is filled in
document.getElementById(nm+i).value = firstitem.value;
}
}
} // looping down the rows
}
clear form field on first focus
<html>
<head>
<title>Clear form field on initial focus</title>
<script type="text/javascript">
function clearOnInitialFocus ( fieldName ) {
var clearedOnce = false;
document.getElementById( fieldName ).onfocus = (function () {
if (clearedOnce == false) {
this.value = '';
clearedOnce = true;
}
})
}
window.onload = function() { clearOnInitialFocus('myfield');
</script>
</head>
<body>
<h1>Clear form field on initial focus</h1>
<input name="myfield" id="myfield" value="default message">
</body>
</html>
solo numeros en campo de texto javascript
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML>
User input validation and security / general security in PHP and programming in general
Regarding user input (e.g. web forms, but pretty much any possible user input): Check the length of the input to verify that it is less than your max (always set some sort of maximum) and greater than zero. In PHP with MySQL, use the function "mysql_real_escape_string" when interacting with the database (db). Always clean your output (to prevent XSS, or Cross-Site Scripting): In PHP, you can use the functions "htmlentities" for textual output and "urlencode" for URI's. Never accept user input for filenames! Write your own filename, perhaps based on pre-cleaned user input, but preferably just an alphanumeric name of your choice (which can be stored in the db for reference). And before you write the file, use the PHP functions "basename" and "realpath" (i.e. basename(realpath($filename)) ) in order to establish exactly where the file would end up if you do write it as is. Also very important: before creating the file, use the PHP function "umask," i.e. umask(077), so that files have their permissions locked down before they are created. This prevents someone from accessing the file before you have time to manually change the permissions. Whenever a user logs in, use the PHP function "session_regenerate_id" to prevent fraudulent access to their account or a session-fixation attack. More to come... Please post your own.
Destacar campo de formulario activo
<input type="text" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='white'">