Почему не на всех областях просмотра при клике на кнопку справа от поля ввода не отключается disabled в самом поле?

Question

[Сергей Золотарёв]

Доброго утра!

Несколько месяцев сталкиваюсь с финальным эпизодом внедрения UI-решения по отключении disabled в поле ввода при нажатии на кнопку справа от любого поля ввода(сама логика построена на JQuery). В остальном на всех областях просмотра работает, а по разному в зависимости от области просмотра и устройства не реагирует одна из первых трёх полей ввода в самой форме.

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

Примеры кода, где возникла данная проблема в HTML-форме

Почему возникает данная проблема и как правильно решить её?

Answer 1

[WapSter]

Лень разбираться в куче говнокода, поэтому держи нормальный вариант решения твоей проблемы.

Comments

[Сергей Золотарёв]

WapSter , мне твой вариант не помог...
Сама разметка:

<div class="passport-page">
                <header>
                    <div id="left-content">
                        <span>Passport</span>
                    </div>
                    <div id="right-content">
                        <a href="../index.html">Exit</a>
                        <nav>
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAy0lEQVRIieWUMQ7CMBAE9xAleQL/oIegwKsoeSYJvADRD00QJjjxOQpCgu1srW/svZOlnxFQAWec8ta1ANBIWroPmlna9fqCrJt5NZu6oBsA7IGLsyWHJKkbUU7DXZAIINmTCOT4acAbJBxTpOf4ddd9gNh+eGY+dMOhIl59b0wnB1irhL+WtJG0kFRKakaTeyZk3fGUMVPoyZ2QwsxugaeQdO2awiRye7BKrP3qiejUxrIAtkCdimgIkPsXPeRrPLAbAWmAanRs/6k7RAnoeBvtDckAAAAASUVORK5CYII=" id="save" alt="Save the changes">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAn0lEQVRIid2Uuw0CMRBER4jsWqAFCoEqLnJdJ5oix9RA+ohOOp0W2PUnMBNZq5kd78eW/g7AFcjEkYGLx6Ak+YqHxwCAgspN3SGaKIqhDBYXKzoDYLbOLQ0AbsAUEUQNAO7AucrA8Q5eQNpqum/Rx1tG+U1a9IXfdch913SjW1y6CgNTN9RfZOJoxJ6STiVtkpT3AauCZBGdydNP1nB4A5tWVezafhVfAAAAAElFTkSuQmCC" id="exit" alt="Exit">
                        </nav>
                    </div>
                </header>
                <main>
                    <div id="left-content">
                            <form action="" method="post" class="profile-settings">
                                <div class="editor">
                                    <label for="login">Login</label>
                                    <input type="text" name="login" value="Jack D" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="mail">E-Mail</label>
                                    <input type="email" name="mail" value="[e-mail]" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="pass">Password</label>
                                    <input type="password" name="pass" value="123456" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="fname">First name</label>
                                    <input type="text" name="fname" value="Daniels" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="sname">Second name</label>
                                    <input type="text" name="sname" value="" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="login">Fone</label>
                                    <input type="text" name="fone" value="" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                
                            </form>
                    </div>
                    <div id="right-content">
                       <ul class="nav">
                           <li class="active"><i class="fas fa-circle" aria-hidden="true"></i><a href="">Passport</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My investment requests</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My offers for investors</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My services for investors</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My shopping Cart</a></li>
                       </ul>
                    </div>
                </main>
                <footer>
                    <div id="left-content">
                        <button class="add-but">Save the changes</button>
                    </div>
                </footer>
            </div>

Сами стили:

@import url('../passport.css');
#passport {
    height: 410px;
}
.passport-page {
    height: calc(284px * 2);
}
.passport-page > main #left-content .profile-settings{
    width: 50%;
}
.passport-page > main #left-content .profile-settings .editor{
    display: block;
    margin-top: 2%;
}
.passport-page > main #left-content .profile-settings .editor label{
    display: block;
    margin-top: 8px;
    font-size: 80%;
    margin-left: 2%;
    color: gray;
}
.passport-page > main #left-content .profile-settings .editor input{
    background-color: white;
    font-size: 90%;
    color:black;
    border: solid 2px darkgray;
    padding: 5px;
    font-weight: bold;
    text-indent: 2%;
    margin-top: 12px;
    width: 86%;
    border-radius: 4px;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-left: 2%;
}
.passport-page > main #left-content .profile-settings .editor #control{
    font-size: 100%;
    display: inline-table;
    margin-top: 15px;
    color: gray;
    margin-left: 2%;
}
.passport-page > main #left-content .profile-settings .editor #control:hover{
    cursor: pointer;
}
.passport-page > main #left-content .profile-settings .editor #control i.inputing{
    color: #0079bf;
}
.passport-page > main #left-content .profile-settings .editor input:focus{
    border-color:#0079bf;
}
.passport-page > main #left-content .profile-settings .editor input:disabled{
    font-weight: normal;
    color: gray;
}
.passport-page > footer{
    position: relative;
    top: -32%;
}
.passport-page > footer #left-content{
    width: 100%;
    top: 60px;
    position: relative;
}

@media all and (max-width: 414px){
    #passport {
        height: 590px;
    }    
}
@media all and (max-width: 600px){
    #passport {
        height: 590px;
    }    
}
@media all and (max-width: 768px){
    #passport {
        height: 590px;
    }    
    .passport-page {
        height: calc(313px * 2);
    }
}
@media all and (max-width: 800px){
    #passport {
        height: 590px;
    }  
    .passport-page {
        height: calc(313px * 2);
    }  
}
@media all and (max-width: 960px){
    #passport {
        height: 590px;
    }  
    .passport-page > main #left-content .profile-settings .editor input{
        width: 80%;
    }
    .passport-page > main #left-content .profile-settings {
        width: 98%;
    }
    .passport-page {
        height: calc(313px * 2);
    }
}
@media all and (max-width: 1024px){
    #passport {
        height: 590px;
    }
    .passport-page {
        height: calc(313px * 2);
    }
}
@media all and (max-width: 1280px){
    #passport {
        height: 680px;
    }

}

И сама логика на JQuery, написанная на основе твоего варианта:

$(document).ready(function () {
    $('.passport-page > main #left-content .profile-settings .editor').click(function (e,t) { 
        const target = $(this);

        if (target.prop("tagName") === 'div' && target.attr('id') === 'control') {
            const input = target.prevAll('input').first();
            input.attr('disabled', !input.attr('disabled'));
            
            if(input.attr('disabled')){
                target.html("<i class='far fa-save inputing'></i>");
            }
            else{
                target.html("<i class='far fa-edit'></i>");
            }
        } 
    });
});

[Сергей Золотарёв]

WapSter , и без всякого JQuery воспользовался твоим вариантом:

const inputs = document.querySelector('.profile-settings');
inputs.addEventListener('click', e => {
  const target = e.target;
  if(target.tagName === 'DIV') {
    const input = target.previousElementSibling;
    input.disabled = !input.disabled;
    target.textContent = input.disabled ? '<i class=\'far fa-edit\'></i>' : '<i class=\'far fa-save inputing\'></i>';
  }
});

И тоже не помогло;-(

[Сергей Золотарёв]

WapSter , я благодарен тебе за вариант ответа, с помощью которого я почти полностью решил проблему, переделывая форму, но заигралась та же песня