Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > атрибуты для форм

Автор: marozz 19.3.2013, 19:25

Помогите разобраться. Нужно на странице найти все элементы с классом "some" (это будут input ) и установить для них атрибут readonly="readonly"
Признаюсь в javascript почти 0, пишу на php, прошу помощи

Автор: baldina 19.3.2013, 21:31

Код


if(document.getElementsByClassName === undefined) {
    document.getElementsByClassName = function(classList) {           
        var i,j,
        list = document.getElementsByTagName('*'),
        length = list.length, 
        classArray = classList.split(/\s+/),
        classes = classArray.length,
        result = [], i,j
        for(i = 0; i < length; i++)
            for(j = 0; j < classes; j++)
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break;
                }
        return result
    }
}

var some = document.getElementsByClassName('some');
for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;

Автор: marozz 20.3.2013, 13:00

спасибо, но поля на которых установлен class='some' не блокируются

Автор: baldina 20.3.2013, 13:20

у меня блокируются: http://jsfiddle.net/VqSy3/
что я делаю не так?

Автор: Aliance 20.3.2013, 16:37

baldina, разве что еще стоило учесть это:

Цитата(marozz @ 19.3.2013, 20:25

)

(это будут input )

Автор: baldina 20.3.2013, 17:24

мож я чего не понял, но в моём примере

Цитата(baldina @ 20.3.2013, 13:20

)

http://jsfiddle.net/VqSy3/

именно input

Автор: marozz 20.3.2013, 19:04

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head><title>тест</title>
<script type="text/javascript">
if(document.getElementsByClassName === undefined) {
    document.getElementsByClassName = function(classList) {           
        var i,j,
        list = document.getElementsByTagName('*'),
        length = list.length, 
        classArray = classList.split(/\s+/),
        classes = classArray.length,
        result = [], i,j
        for(i = 0; i < length; i++)
            for(j = 0; j < classes; j++)
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break;
                }
        return result
    }
}

var some = document.getElementsByClassName('some');
for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;

</script>
</head>
<body>
<input type='text' class='some'/>
</body>
</html>

Попробуйте соххранить в файл и выполнить в браузере.
Не работает, что я делаю не так?

Автор: baldina 20.3.2013, 19:23

Цитата(marozz @ 20.3.2013, 19:04

)

Не работает, что я делаю не так?

пытаетесь обработать элементы, которых еще нет в html на момент запуска скрипта.
javascript отрабатывает немедленно, так что надо выполнять свой код после загрузки всей страницы или хотя бы поместить скрипт после тегов, которые он обрабатывает

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head><title>тест</title>
<script type="text/javascript">
if(document.getElementsByClassName === undefined) {
    document.getElementsByClassName = function(classList) {           
        var i,j,
        list = document.getElementsByTagName('*'),
        length = list.length, 
        classArray = classList.split(/\s+/),
        classes = classArray.length,
        result = [], i,j
        for(i = 0; i < length; i++)
            for(j = 0; j < classes; j++)
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break;
                }
        return result
    }
}
</script>
</head>
<body>
<input type='text' class='some'/>
<script type="text/javascript">
var some = document.getElementsByClassName('some');
for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;
</script>
</body>
</html>

Автор: marozz 20.3.2013, 20:03

baldina, точно, сори. А нельзя ли в саму функцию дописать инициализацию скрипта после полной загрузки страницы, чтоб не прописывать javascript код в тело страницы, а вынести его в отдельный файл. Может бред конечно несу smile

и еще такой момент, возможно ли модифицировать скрипт таким образом чтоб к примеру если есть конструкция

Код


<div class='slaas'>
    <p>Текст</p><input  type='checkbox' ><input type='text'>
</div>

Если на втором input (type='text')установлен класс some, он не просто блокируется, но и при этом для checkbox возле него присваивается свойство display:none , при этом обойтись без присвоения id для checkbox

Автор: baldina 20.3.2013, 21:08

Цитата(marozz @ 20.3.2013, 20:03

)

нельзя и в саму функцию дописать инициализацию скрипта после полной загрузки страницы,

Код


window.onload = function (){
  var some = document.getElementsByClassName('some');
  for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;
}

еще лучше какой-нить библиотекой воспользоваться, напр. jquery

Цитата(marozz @ 20.3.2013, 20:03

)

возможно ли модифицировать скрипт таким образом чтоб к примеру если есть конструкция

можно. только придется поработать с DOM. что бы сделать это проще, опять же jquery и т.п. поможет

Автор: marozz 20.3.2013, 21:18

baldina, jquery уже впринципе на странице для других скриптов используется. Вот как это написать ? не поможете студенту ? smile

буду очень благодарен smile

Автор: baldina 20.3.2013, 22:13

Цитата(marozz @ 20.3.2013, 21:18

)

jquery уже впринципе на странице для других скриптов используется. Вот как это написать ?

ищите функцию ready и вписывайте туда то что нужно.

Код


jQuery().ready(function (){
 ....
  var some = document.getElementsByClassName('some');
  for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;
 ....
})

насчет второго курите http://jquery-docs.ru/Selectors/

Добавлено через 4 минуты и 16 секунд
кстати при использовании jquery огород с document.getElementsByClassName городить не надо

Код


$().ready(function (){
 ....
  $(".some").attr("readOnly", true);
 ....
})

Автор: Aliance 21.3.2013, 10:21

Цитата(baldina @ 20.3.2013, 18:24

)

мож я чего не понял, но в моём примере именно input

я по ссылке не переходил, а смотрел пример кода, который непосредственно здесь был во втором посте. там был нативный js аналог такой конструкции:

Код

$('.some')

а я лишь уточнил, что автору нужно более конкретно:

Код

$('input.some')

хотя это все мелочи, и собственно jQuery легко в этом поможет.

Автор: baldina 21.3.2013, 11:32

нативный код реализовал getElementsByClassName, тут теги непричем
а в посте ТС было

Цитата(marozz @ 19.3.2013, 19:25

)

найти все элементы с классом "some" (это будут input )

т.е. найти все, а что они все input типа и так получится. а если надо, с выбиранием input ТС и сам справится)))
тем боле теперь, с jquery smile

Автор: marozz 21.3.2013, 11:54

baldina, спасибо, тут вроде вроде ясно, а как можно сделать подобное ?

Цитата

и еще такой момент, возможно ли модифицировать скрипт таким образом чтоб к примеру если есть конструкцияРазметка HTML

Код


<div class='slaas'>
    <p>Текст</p><input  type='checkbox' ><input type='text'>
</div>

Если на втором input (type='text')установлен класс some, он не просто блокируется, но и при этом для checkbox (если он есть) возле него присваивается свойство display:none , при этом обойтись без присвоения id для checkbox