javascript - 如何使用 DoodleNerd 的 CSS 文本框提取文本？

Question

我最近使用 DoodleNerd 的 CSS 文本框生成器 ( http://doodlenerd.com/html-control/css-textbox-generator ) 为我的网站制作了一个非常时尚的文本框。我熟悉从表单中提取文本；我以两种主要形式完成了它:

document.getElementById('field').value

or 

driver.findElement(By.id("field")).getCssValue("value")

出于某种原因，当我使用 DoodleNerd 的文本框时，未提取框中的值...这真的很奇怪...我将包括我的 css 和 html 以供引用:

#field {
        position: absolute;
        left: 33px;
        top: 170px;
        overflow: visible;
        width: 129px;
        white-space: nowrap;
        text-align: left;
        font-family: Comic Sans MS;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        color: rgba(249,249,249);
    }
.field {
     padding: 0px;
     font-size: 15px;
     border-width: 5px;
     border-color: #CCCCCC;
     background-color: #ba6fc5;
     color: #f9f9f9;
     border-style: inset;
     border-radius: 5px;
     box-shadow: 4px 2px 5px rgba(66,66,66,.75);
     text-shadow: 49px -11px 5px rgba(177,37,37,.0);
}
 .field:focus {
     outline:none;
}

<div id="field">
        <input type="text" value="e.g. '999'" class="field" />
    </div>

感谢一百万!

Answer 1

您想要的值似乎是:例如“999”是否正确？如果是这样，这应该是您的 JavaScript:

var fieldValue = document.querySelector('.field').value;

看起来您想要的值具有字段的类，而不是字段的 id。

如果你必须使用 document.getElementById()，你也可以这样做:

var field = document.getElementById('field');
var value = field.firstElementChild.value;

但我认为第一种方式可能更好。