Кнопку типа <input type="button"> связать с клавишей(например, с Enter)
Подскажите, пожалуйста, как привязать кнопку типа <input type="button"> к клавише(например, к Enter), предположим в данной форме:
<html> <head> <meta HTTP-EQUIV=Content-Type CONTENT="text/html; CHARSET=UTF-8"> </head> <body> <form> <tr><td><font style="font-size: 15pt;" color="#330000">Количество монет:</font></td><td><input type="text" value="" name="col"></td> <td><input type="button" onclick="start(col.value)" value="Разделим золото"></td></tr> <tr><td><font style="font-size: 15pt;" color="#330000">Общий вес золота:</font></td><td><textarea id="weight" rows="1" cols="15"></textarea></td></tr> <tr><td><font style="font-size: 15pt;" color="#330000">Большая часть:</font></td><td><textarea id="more" rows="1" cols="15"></textarea></td></tr> <tr><td><font style="font-size: 15pt;" color="#330000">Меньшая часть:</font></td><td><textarea id="less" rows="1" cols="15"></textarea></td></tr> <tr><td><font style="font-size: 15pt;" color="#330000">Разница в весе:</font></td><td><textarea id="difference" rows="1" cols="15"></textarea></td></tr> </form> </body> |
Что значит привязать кнопку к клавише? Если надо чтобы в форме при нажатии enter срабатывал обработчик который повешен на кнопку, то можно использовать событие submit - оно как раз возникает при нажатии enter'а при фокусе на элементах формы. Если надо сделать чтобы вообще работало глобально на странице, то можно повесить обработчик на keydown документа и смотреть какую кнопку там нажали.
|
jsnb,
Цитата:
<html>
<head>
<title>«Поделим золото предков честно!»16.05.2014</title>
<meta HTTP-EQUIV=Content-Type CONTENT="text/html; CHARSET=UTF-8">
</head>
<body background="gold.jpg">
<style type="text/css">
table#coints td{
border: 1px solid black;
width: 20px;
}
table{
margin-left:auto;
margin-right:auto;
width:auto;
}
</style>
<script language=javascript type=text/javascript>
function start(val, min, max)//Общая функция в которую приходит начальное условие(кол. монет) и выводит результат в форму. Здесь задаются переменные значения которох берутся с функций ниже.
{
var numberCoins = parseInt(val);//Перевод строки в число
var min=parseInt(min);
var max=parseInt(max);
var arrayCoins = new Array(numberCoins);// генерация массива размером по количеству монет.
genereMassCoins(arrayCoins, min , max);
var allMassCoins = returnAllMassNuber(arrayCoins); //общая масса монет
var table = GenereteTableGold(arrayCoins); // генерация таблицы помассиву
var sortedArray = sortedArrayNumber(arrayCoins);// сортировка массива.
var MinAndMax = returnMinAndMax(sortedArray);// возвращает 2й массив где первый минимальный а второй максимальный.
WriteRezultoNods(MinAndMax[0] , MinAndMax[1], allMassCoins, table); // рисует результаты вычислений
}
function genereMassCoins(massToSave, min , max){
for (var i=0; i < massToSave.length; i++)
{
massToSave[i]=Math.floor(min+(Math.random()*(max-min)));//Вычисление массы каждой монеты
};
}
function sortedArrayNumber(massToSort){// Это сортировка пузирьком но в обратной форме.
var sortArray = massToSort;
for(var index =0; index < massToSort.length -1 ; index++){
for(var varIndex = index+1; varIndex < massToSort.length; varIndex++){
if(sortArray[index]<sortArray[varIndex] ){
var Variable = sortArray[index];
sortArray[index] = sortArray[varIndex];
sortArray[varIndex] = Variable;
}
}
}
return sortArray;
}
function returnAllMassNuber(arrayNumber)//Общая масса
{
var allMas=0;
for(var i =0 ; i< arrayNumber.length; i++){
allMas += arrayNumber[i];
}
return allMas;
}
function returnMinAndMax(sortedArray)//Вычисление большей и меньшей части
{
var min =0, max= 0;
for(var index = 0; index<= sortedArray.length-1; index= index+2){
if(index == sortedArray.length-1){
max +=sortedArray[index];
} else{
min +=sortedArray[index];
max +=sortedArray[index+1];
}
}
return [(min< max)? min: max, (max>min)? max: min]; // (max>min)? max: min - это тернарный оператор.
}
function GenereteTableGold(arrayCoins){
var numberCoinsToLine = 50; //количество записей в золота в строке
var numberRow = parseInt(arrayCoins.length/numberCoinsToLine +1);// вычесляем количество строк (numberCoinsToLine+1)
var table = document.createElement("table");// создаем таблицу
table.id = "coints";// присваеваем ей ID
for(var indexMass =0, indexRow=0; indexRow < numberRow;indexRow++ ){// цикл формирующий строки и переменная индекса массива
var newTr = document.createElement("tr");// создаем новую строку
for(var indexColl=0; indexColl< numberCoinsToLine; indexColl++, indexMass++){// цикл формирующий ячейки и ведущий общий подсчет индекса массива
var newTd = document.createElement("td");// создаем ячеку
if(indexMass< arrayCoins.length){// если индекс допустим для массива
newTd.innerHTML =arrayCoins[indexMass];// заполняем ячейку
}
newTr.appendChild(newTd);// добавляем ячейку в строку
//appendChild() - добавляет новый элемент в конец.
}
table.appendChild(newTr); //добавляем строку в таблицу
}
return table;
}
function WriteRezultoNods(less, more, mass, table)//Вывод результатов в форму
{
var Show = document.getElementById("show");
Show.innerHTML =''; Show.appendChild(table);
document.getElementById('weight').value= mass;
document.getElementById('more').value= more;
document.getElementById('less').value= less;
document.getElementById('difference').value= more-less;
}
</script>
<div align=center>
<font style="font-size: 15pt;" color="#330000" face="Tahoma">Друзья-золотоискателя нашли клад золотых украшений древней цивилизации Инков. Они решили поделить их по весу. Договорились, что раздел будет честным, если разница между двумя частями будет минимальная. Кому же достанется часть большего веса решит "монета".<br>Как правильно поделить золото?</font>
<table>
<form>
<tr><td><font style="font-size: 15pt;" color="#330000">Количество монет:</font></td><td><input type="text" value="" name="col"></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Минимальный вес монеты:</font></td><td><input type="text" value="" name="minweight"></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Максимальный вес монеты:</font></td><td><input type="text" value="" name="maxweight"></td><td><input type="submit" onclick="start(col.value, minweight.value, maxweight.value)" value="Разделим золото"></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Общий вес золота:</font></td><td><textarea id="weight" rows="1" cols="15"></textarea></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Большая часть:</font></td><td><textarea id="more" rows="1" cols="15"></textarea></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Меньшая часть:</font></td><td><textarea id="less" rows="1" cols="15"></textarea></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Разница в весе:</font></td><td><textarea id="difference" rows="1" cols="15"></textarea></td></tr>
</form>
</table>
</div>
<div id="show"></div>
</body>
</html>
|
А если через button, то все нормально работает:
<html>
<head>
<title>«Поделим золото предков честно!»16.05.2014</title>
<meta HTTP-EQUIV=Content-Type CONTENT="text/html; CHARSET=UTF-8">
</head>
<body background="gold.jpg">
<style type="text/css">
table#coints td{
border: 1px solid black;
width: 20px;
}
table{
margin-left:auto;
margin-right:auto;
width:auto;
}
</style>
<script language=javascript type=text/javascript>
function start(val, min, max)//Общая функция в которую приходит начальное условие(кол. монет) и выводит результат в форму. Здесь задаются переменные значения которох берутся с функций ниже.
{
var numberCoins = parseInt(val);//Перевод строки в число
var min=parseInt(min);
var max=parseInt(max);
var arrayCoins = new Array(numberCoins);// генерация массива размером по количеству монет.
genereMassCoins(arrayCoins, min , max);
var allMassCoins = returnAllMassNuber(arrayCoins); //общая масса монет
var table = GenereteTableGold(arrayCoins); // генерация таблицы помассиву
var sortedArray = sortedArrayNumber(arrayCoins);// сортировка массива.
var MinAndMax = returnMinAndMax(sortedArray);// возвращает 2й массив где первый минимальный а второй максимальный.
WriteRezultoNods(MinAndMax[0] , MinAndMax[1], allMassCoins, table); // рисует результаты вычислений
}
function genereMassCoins(massToSave, min , max){
for (var i=0; i < massToSave.length; i++)
{
massToSave[i]=Math.floor(min+(Math.random()*(max-min)));//Вычисление массы каждой монеты
};
}
function sortedArrayNumber(massToSort){// Это сортировка пузирьком но в обратной форме.
var sortArray = massToSort;
for(var index =0; index < massToSort.length -1 ; index++){
for(var varIndex = index+1; varIndex < massToSort.length; varIndex++){
if(sortArray[index]<sortArray[varIndex] ){
var Variable = sortArray[index];
sortArray[index] = sortArray[varIndex];
sortArray[varIndex] = Variable;
}
}
}
return sortArray;
}
function returnAllMassNuber(arrayNumber)//Общая масса
{
var allMas=0;
for(var i =0 ; i< arrayNumber.length; i++){
allMas += arrayNumber[i];
}
return allMas;
}
function returnMinAndMax(sortedArray)//Вычисление большей и меньшей части
{
var min =0, max= 0;
for(var index = 0; index<= sortedArray.length-1; index= index+2){
if(index == sortedArray.length-1){
max +=sortedArray[index];
} else{
min +=sortedArray[index];
max +=sortedArray[index+1];
}
}
return [(min< max)? min: max, (max>min)? max: min]; // (max>min)? max: min - это тернарный оператор.
}
function GenereteTableGold(arrayCoins){
var numberCoinsToLine = 50; //количество записей в золота в строке
var numberRow = parseInt(arrayCoins.length/numberCoinsToLine +1);// вычесляем количество строк (numberCoinsToLine+1)
var table = document.createElement("table");// создаем таблицу
table.id = "coints";// присваеваем ей ID
for(var indexMass =0, indexRow=0; indexRow < numberRow;indexRow++ ){// цикл формирующий строки и переменная индекса массива
var newTr = document.createElement("tr");// создаем новую строку
for(var indexColl=0; indexColl< numberCoinsToLine; indexColl++, indexMass++){// цикл формирующий ячейки и ведущий общий подсчет индекса массива
var newTd = document.createElement("td");// создаем ячеку
if(indexMass< arrayCoins.length){// если индекс допустим для массива
newTd.innerHTML =arrayCoins[indexMass];// заполняем ячейку
}
newTr.appendChild(newTd);// добавляем ячейку в строку
//appendChild() - добавляет новый элемент в конец.
}
table.appendChild(newTr); //добавляем строку в таблицу
}
return table;
}
function WriteRezultoNods(less, more, mass, table)//Вывод результатов в форму
{
var Show = document.getElementById("show");
Show.innerHTML =''; Show.appendChild(table);
document.getElementById('weight').value= mass;
document.getElementById('more').value= more;
document.getElementById('less').value= less;
document.getElementById('difference').value= more-less;
}
</script>
<div align=center>
<font style="font-size: 15pt;" color="#330000" face="Tahoma">Друзья-золотоискателя нашли клад золотых украшений древней цивилизации Инков. Они решили поделить их по весу. Договорились, что раздел будет честным, если разница между двумя частями будет минимальная. Кому же достанется часть большего веса решит "монета".<br>Как правильно поделить золото?</font>
<table>
<form>
<tr><td><font style="font-size: 15pt;" color="#330000">Количество монет:</font></td><td><input type="text" value="" name="col"></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Минимальный вес монеты:</font></td><td><input type="text" value="" name="minweight"></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Максимальный вес монеты:</font></td><td><input type="text" value="" name="maxweight"></td><td><input type="submit" onclick="start(col.value, minweight.value, maxweight.value)" value="Разделим золото"></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Общий вес золота:</font></td><td><textarea id="weight" rows="1" cols="15"></textarea></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Большая часть:</font></td><td><textarea id="more" rows="1" cols="15"></textarea></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Меньшая часть:</font></td><td><textarea id="less" rows="1" cols="15"></textarea></td></tr>
<tr><td><font style="font-size: 15pt;" color="#330000">Разница в весе:</font></td><td><textarea id="difference" rows="1" cols="15"></textarea></td></tr>
</form>
</table>
</div>
<div id="show"></div>
</body>
</html>
|
Цитата:
|
Цитата:
<input type="submit return false" onclick="start(col.value, minweight.value, maxweight.value)" value="Разделим золото">? Или так: <input type="submit" return false onclick="start(col.value, minweight.value, maxweight.value)" value="Разделим золото">? Если как в первом случае, то ничего не меняется, если как во втором, то это получается не кнопка, а просто поле ввода! |
return false - это, очевидно, js-код. И дописывать его надо, очевидно, к js-коду.
<input type="submit" onclick="start(col.value, minweight.value, maxweight.value); return false;" value="Разделим золото"> |
Erolast,
ага, спасибо! Заработало!) |
| Часовой пояс GMT +3, время: 21:06. |