如何在文本框中插入值时实现水平滚动条?

时间:2016-07-14 07:17:03

标签: javascript jquery html css

我在网格中有一个带有复选框的项目列表。当用户从网格中选择或取消选择时,我需要在文本框中以逗号分隔显示和更新项目。我这样做了如下:

HTML:

@Test
    public void testMongoDBTestDataGenerate()
    {
        MongoClient mongoClient = new MongoClient("localhost", 27017);

        DB db = mongoClient.getDB("development");
        DBCollection collection = db.getCollection("ssv");
        int counter=0;
        for (int i = 0; i < 873813; i++)
        {
            BasicDBObject document = new BasicDBObject();
            document.put("database", "test");
            document.put("table", "hosting");

            BasicDBObject documentDetail = new BasicDBObject();
            documentDetail.put("counter0", counter++);
            documentDetail.put("counter1", counter++);
            documentDetail.put("counter2", counter++);
            documentDetail.put("counter3", counter++);
            documentDetail.put("counter4", counter++);
            documentDetail.put("counter5", counter++);
            documentDetail.put("counter6", counter++);
            documentDetail.put("counter7", counter++);
            documentDetail.put("counter8", counter++);
            documentDetail.put("counter9", counter++);

            document.put("detail", documentDetail);

            collection.insert(document);
        }

        mongoClient.close();

    }
}

Javascript-jQuery (当用户从​​网格中选择或取消选择项目时):

<input type "text" id="items">

一切都很好。现在问题是当用户选择超过6个项目时,只会显示前6个项目。我想用水平滚动条扩展文本框。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:1)

您应该使用textarea而不是输入。它有滚动条。如果你想要在一行上,那么你应该使用css white-space: nowrap;并设置一个与简单输入相同的高度。

&#13;
&#13;
<textarea id="items" rows="2" cols="40" style="white-space: nowrap; overflow-y: hidden;">
Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text Example text 
</textarea>
&#13;
&#13;
&#13;

然后你可以像输入一样改变textarea值。