Архивы javascript - Страница 7 из 10

Jquery и маска ввода телефона

12.02.2018 Павел Грибов WEB

К сожалению наиболее часто упоминаемый в «интернетах» плагин maskedinput не очень хорошо работает на мобильных устройствах. Адекватной заменой может служить плагин inputmask: https://github.com/RobinHerbots/Inputmask

Один огромный минус — уж очень «жирноват» плагин для простых задачь. Иногда лучше использовать «чистый» javascript:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
    <input  value="+7(___)___-____">
    <script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
    elem.focus();
    if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
    else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd("character", pos);
        range.moveStart("character", pos);
        range.select()
    }
}

function mask(event) {
    var matrix = this.defaultValue,
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
        def.length >= val.length && (val = def);
    matrix = matrix.replace(/[_\d]/g, function(a) {
        return val.charAt(i++) || "_"
    });
    this.value = matrix;
    i = matrix.lastIndexOf(val.substr(-1));
    i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");
    setCursorPosition(i, this)
}

    var input = document.querySelector("input");
    input.addEventListener("input", mask, false)
});
  </script>
</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled</title>

</head>

<body>

window.addEventListener("DOMContentLoaded", function() {

function setCursorPosition(pos, elem) {

elem.focus();

if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);

else if (elem.createTextRange) {

var range = elem.createTextRange();

range.collapse(true);

range.moveEnd("character", pos);

range.moveStart("character", pos);

range.select()

}

function mask(event) {

var matrix = this.defaultValue,

i = 0,

def = matrix.replace(/\D/g, ""),

val = this.value.replace(/\D/g, "");

def.length >= val.length && (val = def);

matrix = matrix.replace(/[_\d]/g, function(a) {

return val.charAt(i++) || "_"

});

this.value = matrix;

i = matrix.lastIndexOf(val.substr(-1));

i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");

setCursorPosition(i, this)

}

var input = document.querySelector("input");

input.addEventListener("input", mask, false)

});

</script>

</body>

</html>

Оставить комментарий inputmask, javascript, maskedinput, maskinput, мобильный

Простой способ сохранить файл по нажатию кнопки на странице (HTML)

08.02.2018 Павел Грибов PHP

Задача: по нажатию кнопки на странице, чтоб вызывался диалог сохранения файла и собственно сохранялся произвольный файл с сервера.

Решение:

В коде html страницы упоминаем скрытую форму:

<form method="post" action="inc/csvExport.php">
	<input type="hidden" name="csvBuffer" id="csvBuffer" value="" />
</form>

</form>

Добавляем туда же обработчик нажатия вида:

    $("#viewwork").click(function(){       
            document.forms[0].method='POST';
            document.forms[0].action=save_file.php; 
            document.forms[0].target='_self';
            document.forms[0].submit();  	    	    
       return false;
    });

$("#viewwork").click(function(){

document.forms[0].method='POST';

document.forms[0].action=save_file.php;

document.forms[0].target='_self';

document.forms[0].submit();

return false;

});

Ну код на сервере для:

save_file.php:

<?php

// Данный код создан и распространяется по лицензии GPL v3
// Изначальный автор данного кода - Грибов Павел
// http://грибовы.рф

$ex= "1;2;3;4;5;6;7";
 header("Content-type: application/msexcel");
    header("Accept-Ranges: bytes");
    header("Content-Length: " . strlen($ex));
    header("Content-Disposition: attachment; filename=rep_by_addr.csv");

?>

<?php

// Данный код создан и распространяется по лицензии GPL v3

// Изначальный автор данного кода - Грибов Павел

// http://грибовы.рф

$ex= "1;2;3;4;5;6;7";

header("Content-type: application/msexcel");

header("Accept-Ranges: bytes");

header("Content-Length: " . strlen($ex));

header("Content-Disposition: attachment; filename=rep_by_addr.csv");

csvExport.php:

<?php

// Данный код создан и распространяется по лицензии GPL v3
// Изначальный автор данного кода - Грибов Павел
// http://грибовы.рф

header('Content-type: application/vnd.ms-excel');
if (isset($_GET["csv"])==true){
    header("Content-Disposition: attachment; filename=file.csv");
} else {
    header("Content-Disposition: attachment; filename=file.xls");
};
header("Pragma: no-cache");

$buffer = $_POST['csvBuffer'];

try{
    echo $buffer;
}catch(Exception $e){

}
?>

<?php

// Данный код создан и распространяется по лицензии GPL v3

// Изначальный автор данного кода - Грибов Павел

// http://грибовы.рф

header('Content-type: application/vnd.ms-excel');

if (isset($_GET["csv"])==true){

header("Content-Disposition: attachment; filename=file.csv");

} else {

header("Content-Disposition: attachment; filename=file.xls");

};

header("Pragma: no-cache");

$buffer = $_POST['csvBuffer'];

try{

echo $buffer;

}catch(Exception $e){

}

Оставить комментарий html, javascript, php, сохранение файла

Установка курсора в позицию поля input или textarea на JavaScript

12.12.2017 Павел Грибов WEB

Кроссплатформенное решение, не требующее Jquery:

function getCaretPosition(ctrl) {
    if (document.selection) {
        ctrl.focus();
        var range = document.selection.createRange();
        var rangelen = range.text.length;
        range.moveStart('character', -ctrl.value.length);
        var start = range.text.length - rangelen;
        return {
            'start': start,
            'end': start + rangelen
        };
    } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
        return {
            'start': ctrl.selectionStart,
            'end': ctrl.selectionEnd
        };
    } else {
        return {
            'start': 0,
            'end': 0
        };
    }
}


function setCaretPosition(ctrl, start, end) {
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(start, end);
    } else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    }
};

function getCaretPosition(ctrl) {

if (document.selection) {

ctrl.focus();

var range = document.selection.createRange();

var rangelen = range.text.length;

range.moveStart('character', -ctrl.value.length);

var start = range.text.length - rangelen;

return {

'start': start,

'end': start + rangelen

};

} else if (ctrl.selectionStart || ctrl.selectionStart == '0') {

return {

'start': ctrl.selectionStart,

'end': ctrl.selectionEnd

};

} else {

return {

'start': 0,

'end': 0

};

}

function setCaretPosition(ctrl, start, end) {

if (ctrl.setSelectionRange) {

ctrl.focus();

ctrl.setSelectionRange(start, end);

} else if (ctrl.createTextRange) {

var range = ctrl.createTextRange();

range.collapse(true);

range.moveEnd('character', end);

range.moveStart('character', start);

range.select();

}

};

Использование:

//прочитаем позицию с выделеним
outpz = getCaretPosition(document.getElementById('summpayme'));
//установим позицию с выделением
setCaretPosition(document.getElementById('summpayme'),outpz.start, outpz.end);

//прочитаем позицию с выделеним

outpz = getCaretPosition(document.getElementById('summpayme'));

//установим позицию с выделением

setCaretPosition(document.getElementById('summpayme'),outpz.start, outpz.end);

Оставить комментарий input, javascript, textarea, позиция курсора, установить

JavaScript проверка попадания в рабочее время

26.10.2017 Павел Грибов WEB

Например, нам нужно, чтобы какаято часть страницы работала исключительно в рабочее время. Для этого реализуем проверку «попадания» в рабочее время.

<script>
//зададим рабочее время
worktime=[]
worktime[0]={start:10,end:23}; //воскресенье с 10 до 23
worktime[6]={start:10,end:23}; //суббота с 10 до 23
worktime[4]={start:10,end:23}; //четверг с 10 до 23
    
function IsWorkTime(worktime){
  var dt=new Date();
  var w=dt.getDay();
  if (typeof(worktime[w])!="undefined"){
      if (dt.getHours()>=worktime[w].start&dt.getHours()<=worktime[w].end){
	console.log("работаем!");
	return true;  	  	  
      } else {
	console.log("в это время не работаем!");
	return false;  	  
      };      
  } else {
    console.log("в этот день недели не работаем!");
    return false;  
  };
};
alert(IsWorkTime(worktime));
</script>

//зададим рабочее время

worktime=[]

worktime[0]={start:10,end:23}; //воскресенье с 10 до 23

worktime[6]={start:10,end:23}; //суббота с 10 до 23

worktime[4]={start:10,end:23}; //четверг с 10 до 23

function IsWorkTime(worktime){

var dt=new Date();

var w=dt.getDay();

if (typeof(worktime[w])!="undefined"){

if (dt.getHours()>=worktime[w].start&dt.getHours()<=worktime[w].end){

console.log("работаем!");

return true;

} else {

console.log("в это время не работаем!");

return false;

};

} else {

console.log("в этот день недели не работаем!");

return false;

};

alert(IsWorkTime(worktime));

</script>

Оставить комментарий javascript, рабочее время

Проверка наличия обьекта в javascript

19.10.2017 Павел Грибов WEB

for (i in obj_for_load) {		
 if (typeof obj_for_load[i]=="object") {
   console.log(obj_for_load[i]);
 }
}

for (i in obj_for_load) {

if (typeof obj_for_load[i]=="object") {

console.log(obj_for_load[i]);

}

Оставить комментарий javascript, проверка наличия обьекта

« 1 … 5 6 7 8 9 10 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31