У меня проблемы с попыткой выбрать <textarea>

Question

HI,

Есть идеи, почему я не могу выделить текст в div "blurbedit" или "headlineblack"?

Я думаю, что сделал немного неаккуратного кодирования, чтобы div-элементы нижнего колонтитула располагались горизонтально, но это означало, что верхние div-ы не могут быть выбраны, что не очень хорошо, когда один из них является полем ввода!

посмотрите этот пример, чтобы понять, что я имею в виду: www.gherkin.co.nz/ff/textarea.html

Вы можете выбрать текст из трех элементов внизу, но не текст вверху.

Я уверен, что это очень очевидная вещь, но я с трудом пытаюсь ее обнаружить ...

    <div class="container">
    <div class="headlinered">Homepage Blurb:</div>
    <div class="home_headline_edit">


    <form method="post">
    <input type="hidden" name="id" value="
    1">
    <textarea name="blurb" cols="40" rows="10" class="box" id="blurbedit">

blurb edit content
    </textarea>
    <input name="update1" type="submit" class="box" id="editbutton" value="Update Article"></form>
    </div>
    <div class="header2cms">

    <p class="headlineblack">

    headline content
    </p>
    </div>
    </div>

    </div>

    <div class="container">
    <div class="headlinered">Footer:</div>

    <div style="height:300px;">
      <div class="footer">
        <p class="bodyblack">
       footer content

    </p>
      </div>


    <div>


    <form method="post">
    <input type="hidden" name="id" value="
    1">
    <textarea name="footer" cols="30" rows="10" class="box" id="footeredit">
footer edit content
    </textarea><br />
    <input name="update2" type="submit" class="box" id="footerbutton" value="Update Article"></form>
    </div>

    <div class="footerhelp">
    (footer help)

    </div>
    </div>

    </div>

и вот CSS:

.footerhelp{
    width: 300px;
    position: relative;
    left: 475px;
    margin-top:60px;
    top: -270px;
    overflow: hidden;

}
.footer {
    width: 170px;
    padding-top: 20px;
    position:absolute;
}
#blurbedit{
    font-family: Helvetica, Arial, sans-serif;
    font-size:0.8em;
    border: none;
    background:#CCC;
    color:#666;
    padding:10px;
}
#footeredit{
    font-family: Helvetica, Arial, sans-serif;
    font-size:0.8em;
    border: none;
    background:#CCC;
    color:#666;
    padding:10px;
    margin-top:20px;
    margin-left:20px;
    position: relative;
    left: 190px;
    top: 0px;
}
.headlinered {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.7em;
    line-height: 140%;
    color: #991200;
    margin-top: 0px;
}
.headlineblack {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.7em;
    line-height: 140%;
    margin-top: 5px;
    margin-bottom: 0px;
    width:455px;
}
.home_headline_edit{
    float:left;
    width: 360px;
    margin-right:20px;
}
.container {
    width: 835px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.header2cms {
    width: 455px;
    padding-left: 0px;
    padding-bottom: 40px;
    float: left;
    margin-left: -50px;
}
.bodyblack {
    font-family: Helvetica, Arial, sans-serif;
    font-size: .7em;
    line-height: 140%;
    color: #000000;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
}

Answer 1

Считаете ли вы, что причиной этой проблемы является комбинация настроек float: left и position: relative ваших правил .home_headline_edit и .container?

Удаление правила position: relative, похоже, работает, сохраняя визуальный стиль страницы.

Пахнет как ошибка браузера ... но я не могу воспроизвести ее с урезанной страницей.

Answer 2

Используете ли вы hammer.js? Потому что Hammer.js связывает событие «selectstart» с различными элементами. По крайней мере, у меня был такой случай.