diff --git a/IPython/html/static/widgets/js/widget_string.js b/IPython/html/static/widgets/js/widget_string.js
index d5dd9eb..4fe80d4 100644
--- a/IPython/html/static/widgets/js/widget_string.js
+++ b/IPython/html/static/widgets/js/widget_string.js
@@ -71,6 +71,11 @@ define(["widgets/js/widget"], function(WidgetManager){
this.update(); // Set defaults.
this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
+ this.model.on('change:placeholder', function(model, value, options) {
+ this.update_placeholder(value);
+ }, this);
+
+ this.update_placeholder();
},
_handle_textarea_msg: function (content){
@@ -80,6 +85,13 @@ define(["widgets/js/widget"], function(WidgetManager){
}
},
+ update_placeholder: function(value) {
+ if (!value) {
+ value = this.model.get('placeholder');
+ }
+ this.$textbox.attr('placeholder', value);
+ },
+
scroll_to_bottom: function (){
// Scroll the text-area view to the bottom.
this.$textbox.scrollTop(this.$textbox[0].scrollHeight);
@@ -141,6 +153,18 @@ define(["widgets/js/widget"], function(WidgetManager){
.appendTo(this.$el);
this.$el_to_style = this.$textbox; // Set default element to style
this.update(); // Set defaults.
+ this.model.on('change:placeholder', function(model, value, options) {
+ this.update_placeholder(value);
+ }, this);
+
+ this.update_placeholder();
+ },
+
+ update_placeholder: function(value) {
+ if (!value) {
+ value = this.model.get('placeholder');
+ }
+ this.$textbox.attr('placeholder', value);
},
update: function(options){
diff --git a/IPython/html/tests/widgets/widget_string.js b/IPython/html/tests/widgets/widget_string.js
index d5ffa07..1288cbd 100644
--- a/IPython/html/tests/widgets/widget_string.js
+++ b/IPython/html/tests/widgets/widget_string.js
@@ -7,8 +7,8 @@ casper.notebook_test(function () {
this.execute_cell_then(index);
var string_index = this.append_cell(
- 'string_widget = [widgets.TextWidget(value = "xyz"),\n' +
- ' widgets.TextareaWidget(value = "xyz"),\n' +
+ 'string_widget = [widgets.TextWidget(value = "xyz", placeholder = "abc"),\n' +
+ ' widgets.TextareaWidget(value = "xyz", placeholder = "def"),\n' +
' widgets.HTMLWidget(value = "xyz"),\n' +
' widgets.LatexWidget(value = "$\\\\LaTeX{}$")]\n' +
'[display(widget) for widget in string_widget]\n'+
@@ -41,5 +41,13 @@ casper.notebook_test(function () {
this.test.assert(this.cell_element_exists(string_index,
'.widget-area .widget-subarea div span.MathJax_Preview'),
'MathJax parsed the LaTeX successfully.');
+
+ this.test.assert(this.cell_element_function(index,
+ '.widget-area .widget-subarea .widget-hbox textarea', 'attr', ['placeholder'])=='def',
+ 'Python set textarea placeholder.');
+
+ this.test.assert(this.cell_element_function(index,
+ '.widget-area .widget-subarea .widget-hbox-single input[type=text]', 'attr', ['placeholder'])=='abc',
+ 'Python set textbox placehoder.');
});
-});
\ No newline at end of file
+});
diff --git a/IPython/html/widgets/widget_string.py b/IPython/html/widgets/widget_string.py
index e3505c5..9f6aa30 100644
--- a/IPython/html/widgets/widget_string.py
+++ b/IPython/html/widgets/widget_string.py
@@ -23,6 +23,7 @@ class _StringWidget(DOMWidget):
value = Unicode(help="String value", sync=True)
disabled = Bool(False, help="Enable or disable user changes", sync=True)
description = Unicode(help="Description of the value this widget represents", sync=True)
+ placeholder = Unicode("", help="Placeholder text to display when nothing has been typed", sync=True)
class HTMLWidget(_StringWidget):
diff --git a/docs/source/whatsnew/pr/textwidget-placeholder.rst b/docs/source/whatsnew/pr/textwidget-placeholder.rst
new file mode 100644
index 0000000..0d20265
--- /dev/null
+++ b/docs/source/whatsnew/pr/textwidget-placeholder.rst
@@ -0,0 +1,3 @@
+* `TextWidget` and `TextareaWidget` objects now include a
+ `placeholder` attribute, for displaying placeholder text before the
+ user has typed anything.
diff --git a/examples/Interactive Widgets/Widget Basics.ipynb b/examples/Interactive Widgets/Widget Basics.ipynb
index 3b12ed0..d39b375 100644
--- a/examples/Interactive Widgets/Widget Basics.ipynb
+++ b/examples/Interactive Widgets/Widget Basics.ipynb
@@ -7,7 +7,7 @@
]
],
"name": "",
- "signature": "sha256:9a70b52f0b16861d1cd6a8342b233247958977a52bde8d3efd69d21131ce1926"
+ "signature": "sha256:5ac3a85c8bb2f9bb3cd63b524bbb626ab1531176b43a109d13f5d7794f805eee"
},
"nbformat": 3,
"nbformat_minor": 0,
@@ -31,7 +31,7 @@
"language": "python",
"metadata": {},
"outputs": [],
- "prompt_number": 1
+ "prompt_number": 2
},
{
"cell_type": "heading",
@@ -298,6 +298,39 @@
}
],
"prompt_number": 10
+ },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "Some widgets have special attributes. For example, text boxes and text areas can specify the `placeholder` attribute, which will set \"placeholder\" text to be displayed before the user has typed anything:"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "collapsed": false,
+ "input": [
+ "mytextwidget = widgets.TextWidget()\n",
+ "mytextwidget.placeholder = \"type something here\"\n",
+ "display(mytextwidget)"
+ ],
+ "language": "python",
+ "metadata": {},
+ "outputs": [],
+ "prompt_number": 4
+ },
+ {
+ "cell_type": "code",
+ "collapsed": false,
+ "input": [
+ "mytextareawidget = widgets.TextareaWidget()\n",
+ "mytextareawidget.placeholder = \"your text here\"\n",
+ "display(mytextareawidget)"
+ ],
+ "language": "python",
+ "metadata": {},
+ "outputs": [],
+ "prompt_number": 5
}
],
"metadata": {}